Building simple table from JSON.

Posted on 2009-02-10
Last Modified: 2012-05-06

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.
Question by:EnolaKotrotsos
    LVL 5

    Accepted 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

    LVL 1

    Author Comment

    Mike, thank you very much- that even went completely beyond my expectations! You are amazing..:) Thanks again for your help...

    Expert Comment

    Its just what I have been looking for :)

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now