Generating HTML table in javascript from JSON

Question

I want to generate an HTML table from this type of JSON :

{  
   "fields":{  
      "Product.Name":[  
         "ql23xx-firmware",
         "setup",
         "ql2500-firmware"
      ],
      "Product.Version":[  
         "3.03.27-3.1.el6-noarch",
         "2.8.14-13.el6-noarch",
         "5.06.02-1.el6-noarch"
      ],
      "Id":[  
         "tdcapa11s"
      ],
      "CMDB.EntityInCharge":[  
         "SUP.CA_SYS"
      ]
   }
}

I can easily do a table like :

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>CMDB.EntityInCharge</th>
            <th>Product.Name</th>
            <th>Product.Version</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>tdcapa11s</td>
            <td>SUP.CA_SYS</td>
            <td>ql23xx-firmware, setup, ql2500-firmware</td>
            <td>3.03.27-3.1.el6-noarch, 2.8.14-13.el6-noarch, 5.06.02-1.el6-noarch</td>
        </tr>
    </tbody>
</table>

But i want something like :

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>CMDB.EntityInCharge</th>
            <th>Product.Name</th>
            <th>Product.Version</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>tdcapa11s</td>
            <td>SUP.CA_SYS</td>
            <td>ql23xx-firmware</td>
            <td>3.03.27-3.1.el6-noarch</td>
        </tr>
        <tr>
            <td>tdcapa11s</td>
            <td>SUP.CA_SYS</td>
            <td>setup</td>
            <td>2.8.14-13.el6-noarch</td>
        </tr>
        <tr>
            <td>tdcapa11s</td>
            <td>SUP.CA_SYS</td>
            <td>ql2500-firmware</td>
            <td>5.06.02-1.el6-noarch</td>
        </tr>
    </tbody>
</table>

How to generate this with Javascript ?

I'm not far away from this but my javascript code is actually very long for such a simple thing like that

Despite how lengthy/embarrassing your current code may be, you need to show it so we have something to work with. Don't be shy :) — iCollect.it Ltd, Apr 19 '16 at 13:35

score 1 · Accepted Answer · answered Apr 19 '16 at 14:01

Here is one way you can do it:

body_row.append( td.clone().html( (field == 'Id' || field == 'CMDB.EntityInCharge') ? data.fields[field][0] : data.fields[field][i] ) );

As in the demo below:

var data = {  
   "fields":{  
      "Id":[  
         "tdcapa11s"
      ],
      "CMDB.EntityInCharge":[  
         "SUP.CA_SYS"
      ],
      "Product.Name":[  
         "ql23xx-firmware",
         "setup",
         "ql2500-firmware"
      ],
      "Product.Version":[  
         "3.03.27-3.1.el6-noarch",
         "2.8.14-13.el6-noarch",
         "5.06.02-1.el6-noarch"
      ]
   }
}
var table = $('<table/>'),
    thead = $('<thead/>'),
    tbody = $('<tbody/>'),
    tr    = $('<tr/>'),
    th    = $('<th/>'),
    td    = $('<td/>');
//header row
var hrow = tr.clone();
for(field in data.fields) {
    hrow.append( th.clone().html( field ) );
}
//append row to thead and table
table.html( thead.html( hrow ) );
//body rows
for( var i = 0; i < data.fields["Product.Name"].length; i++ ) {
    var brow = tr.clone();
    for(field in data.fields) {
        brow.append( td.clone().html( (field == 'Id' || field == 'CMDB.EntityInCharge') ? data.fields[field][0] : data.fields[field][i] ) );
    }
    //append row to tbody
    tbody.append( brow );
}
//append tbody to table
table.append( tbody );
//append table to page
$('#table').html( table );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table"></div>

Generating HTML table in javascript from JSON

1 Answers1