Using jQuery or javascript to render json into multi-column table

Question

I am trying to render a JSON into a HTML table. But the difficulty is making it so it loops through JSON and renders multiple columns if necessary.

For the example below, what I want is this:

Result wanted

Result Wanted

<table>
<tr><th>AppName</th><td>App 1</td><td>App 2</td></tr>
<tr><th>Last Modified</th><td>10/1/2012</td><td></td></tr>
<tr><th>App Logo</th><td>10/1/2012</td><td></td></tr>
blahblah
</table>

<table>
<tr><th>AppName</th><td>App 1</td></tr>
blahblah
</table>

JSON Example

"Records": [
    {
        "AppName": "App 1",
        "LastModified": "10/1/2012, 9:30AM",
        "ShipTo_Name": "Dan North",
        "ShipTo_Address": "Dan North",
        "ShipTo_Terms": "Dan North",
        "ShipTo_DueDate": "Dan North",
        "Items 1": [
            {
                "Item_Name": "Repairs",
                "Item_Description": "Repair Work"
            }
        ]
    },
    {
        "AppName": "App 2",
        "AppLogo": "http://www.google.com/logo.png",
        "LastModified": "10/1/2012, 9:30AM",
        "BillTo_Name": "Steve North",
        "Items 1": [
            {
                "Item_Name": "Repairs",
                "Item_Description": "Repair Work"
            }
        ]
    }
],
"Records": [
    {
        "AppName": "App 1",
        "LastModified": "10/1/2012, 9:30AM",
        "ShipTo_Name": "222",
        "ShipTo_Address": "333 ",
        "ShipTo_Terms": "444",
        "ShipTo_DueDate": "5555",
        "Items 1": [
            {
                "Item_Name": "Repairs",
                "Item_Description": "Repair Work"
            }
        ]
    }
],

Code I am using now

function CreateComparisonTable (arr,level,k) {
    var dumped_text = "";
    if(!level) level = 0;

    //The padding given at the beginning of the line.
    var level_padding = "";
    for(var j=0;j<level+1;j++) level_padding = "--";

    if(typeof(arr) == 'object') { //Array/Hashes/Objects
        for (var item in arr) {
            var value = arr[item];
            if (typeof(value) == 'object') { //If it is an array,
                if(item !=0) {
                    dumped_text += '<tr><td>' + item + '<br>';
                    dumped_text += CreateComparisonTable(value,level+1);
                    dumped_text += '</td></tr>';
                } else {
                    dumped_text += CreateComparisonTable(value,level, value.length);
                }
            } else {
              dumped_text += '<tr><td>' + level_padding + item + '</td><td>' + value + '</td></tr>';
            }
        }
    } 
    return dumped_text;
}

Jsfiddle here

So, what have you tried? You can use for (i in obj) { ... } to loop through your object. — dakdad
– dakdad, Commented Oct 12, 2012 at 18:14
the first thing you need is to use different keys for each table array. you are using "Record" for both. Also, is there a reason you can't use JSON.parse? — user1726343
– user1726343, Commented Oct 12, 2012 at 18:15
Hi, how would JSON.parse help in this? Curious to learn more about this. — Scott Yu - builds stuff
– Scott Yu - builds stuff, Commented Oct 12, 2012 at 20:41

jimmym715 · Accepted Answer · 2012-10-12 18:23:06Z

1

DataTables, a plug-in for jQuery, is a good candidate for this scenario, and it's got a lot of features "baked into" its code.

I've used it, and it handled just about everything I threw at it.

answered Oct 12, 2012 at 18:23

jimmym715

1,4901 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

prash Over a year ago

DataTable is by far a great tool for all tables / ajax / jQuery related work.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

You might want to look into using a templating language such as Mustache

You might find this question useful: How to structure JSON and build HTML via jQuery

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 12, 2012 at 18:14

Acorn

50.8k30 gold badges143 silver badges180 bronze badges

Comments

eloycm · Accepted Answer · 2012-10-12 18:31:40Z

0

I will recommend jtemplates. a jQuery plugin http://jtemplates.tpython.com/ It's a powerful template language and the code can be stored anywhere. Inline in the page, in a separate file wherever is best for you. It looks a lot like asp classic. Take a look

{#template MAIN}
 <div id="header">{$T.name}</div>
 <table>
 {#foreach $T.table as r}
  {#include row root=$T.r}
 {#/for}
 </table>
{#/template MAIN}

{#template row}
 <tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
  <td>{$T.name.bold()}</td>
  <td>{$T.age}</td>
  <td>{$T.mail.link('mailto:'+$T.mail)}</td>
 </tr>
{#/template row}

answered Oct 12, 2012 at 18:31

eloycm

4142 silver badges12 bronze badges

Comments

Andy · Accepted Answer · 2012-10-12 18:51:55Z

0

Have a look at this comparison chart on jsfiddle I've just made. The individual cells are populated dynamically when the select event is detected from the dropdown menu. Maybe you can fork the fiddle and use some of the code to acomplish what you want to do with your table.

answered Oct 12, 2012 at 18:51

Andy

398 bronze badges

Collectives™ on Stack Overflow

Using jQuery or javascript to render json into multi-column table

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related