home

Json Data Showing in table

Json is the core data exchanger, below example code is storing json data in variable(mydata) showing in the front end through javascript, Data is in name followed by a colon and value(Name:William Henry Gates) pairs and data is separated by commas(,) and main and most important thing Square brackets([ ]) hold arrays, Curly braces({ }) hold objects.

Online Demo

Json Data in format

var mydata=[
{
"Name": "William Henry Gates",
"City": "Medina, Washington",
"Country": "United States",
"Founder": "Microsoft"
},
{
"Name": "Larry Page, Sergey Brin",
"City": "California",
"Country": "United States",
"Founder": "Google"
},
{
"Name": "Liu Chuanzhi",
"City": "Beijing",
"Country": "China",
"Founder": "Lenovo"
},
{
"Name": "Mark Zuckerberg",
"City": "White Plains, New York",
"Country": "United States",
"Founder": "Facebook"
},
{
"Name": "Jeff Bezos",
"City": "Seattle, Washington",
"Country": "United States",
"Founder": "Amazon.com"
}
]

Css Code

table{width:100%;}
td{width:20%;border:1px solid #ccc; font-family:arial; font-size:13px;padding:5px;}
tr:nth-child(odd){background:#eff6f8;}
tr:nth-child(1){background:#474477; color:#fff}

Javascript code

Example Javasscript code
var array = ' ';
for(var i=0;i<mydata.length;i++){
array = array+"<tr><td>"+mydata[i].Name+"</td>"+"<td>"+mydata[i].City+"</td>"+"<td>"+mydata[i].Country+"</td></tr>"}
document.getElementById('id01').innerHTML="<table>"+array+"</table>";