Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6359
  • Last Modified:

Building simple table from JSON.


I am trying to build a html table from a json string which mostly looks like this

{'records': [{'id':'po-0167','x':'xx'},{'id':'po-0783', 'y':'yy'}]}

But I can't figure out how to formulate the loop required. I want a table, with 2 rows in this case (but that of course depends on how many records there are) and in this case 2 columns (but again, depends on the number of colums in the string...which varies)

the json can also look like

{'records': [{'id':'234','name':'marco','age':24},{'id':'0783', 'name':'silvia','age':33}]}


how do I loop over this object without running out of scope or anything and have a html table build? (the table building itself is not important....)

Hope someone can provide me with an example.
Thank you very much.
1 Solution
Here is a simple working example to show the mechanics.

You may want to extend it to handle any text which contains characters which ight mix up Javascript, missing values in the records etc, or look at differetn JSON parses to use a package made for the purpose (just Google parse JSON).

Hope this helps, Mike

<script language=javascript>
function drawtable()
var i, imax, shtml;
var inputjson = "{'records': [{'id':'234','name':'marco','age':24},{'id':'0783', 'name':'silvia','age':33}]}";
var myJSONobj = eval('(' + inputjson + ')');   //convert the data to an object - prefer JSON parse here
var irowmax = myJSONobj.records.length;
if (irowmax < 1) {
  alert ('No rows in table');
var cols = new Array();
                                        //get an array of column names
for (var key in myJSONobj.records[0]) {  //assumign all columns present in first record
   cols[cols.length] = key;
icolmax = cols.length
shtml = "<table border=1><tr>";          //create header row - save html of table in shtml
for (i=0;i<icolmax;i++) {
  shtml += "<th>" + cols[i] + "</th>";
shtml += "</tr>";
var irowmax = myJSONobj.records.length;
for (irow = 0; irow < irowmax; irow++) {  //add the rows
  shtml += "<tr>";
  for (i=0;i<icolmax;i++) {
    shtml += "<td>" + myJSONobj.records[irow][cols[i]] + "</td>";
  shtml += "</tr>";
document.getElementById('mydiv').innerHTML = shtml;   //write the table into div mydiv
<body onload="drawtable()">
<div id='mydiv'><div>

Open in new window

EnolaKotrotsosAuthor Commented:
Mike, thank you very much- that even went completely beyond my expectations! You are amazing..:) Thanks again for your help...
Its just what I have been looking for :)

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now