Create table based on JSON with Javascript

Question

I have some JSON which I would like to put into a table, but one of the items in the dict should be in a separate table at the top.

{
"test": {
  "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5
  },
"test2": {
  "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5
  }
}

I would like to loop through the test dict's and parse table from them underneath each other like this:

I have it working for the 1/2/3/4/5 table but am unable to put the upper row in the code as well... with:

 $(function() { var tbody = $("<tbody />"), tr; $.each(trades, function(_, obj) { tr = $("<tr />"); $.each(obj, function(_, text) { tr.append("<td>" + text + "</td>") }); tr.appendTo(tbody); }); tbody.appendTo("#trades_table"); }) 

 <table class="table" id="trades_table"> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> </thead> </table> 

Answer 1

All you need to do is append a row with colspan of 5 with text as key value before iterating over the array like this:

 var trades={ "test": { "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5 }, "test2": { "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5 } }; $(function() { var tbody = $("<tbody />"), tr; $.each(trades, function(_, obj) { tr = $("<tr />"); tr.append("<td colspan='5' align='center'>" + _ + "</td>") tr.appendTo(tbody); tr = $("<tr />"); $.each(obj, function(_, text) { tr.append("<td>" + text + "</td>") }); tr.appendTo(tbody); }); tbody.appendTo("#trades_table"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table" id="trades_table" border="1"> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> </thead> </table> 

Updated to make col3 as header

 var trades={ "test": { "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5 }, "test2": { "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5 } }; $(function() { var tbody = $("<tbody />"), tr; $.each(trades, function(_, obj) { tr = $("<tr />"); tr.append("<td colspan='5' align='center'>" + obj['col3'] + "</td>") tr.appendTo(tbody); tr = $("<tr />"); $.each(obj, function(_, text) { tr.append("<td>" + text + "</td>") }); tr.appendTo(tbody); }); tbody.appendTo("#trades_table"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table" id="trades_table" border="1"> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> </thead> </table> 

Answer 2

You can simply loop through your JSON and create a new table for each occurrence. You can find the number of columns with Object.keys(YOUR_OBJ).length :

 var obj = { "test": { "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5 }, "test2": { "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5 } }; $.each(obj,function(k,v){ var table = $(` <table> <thead> <tr><th colspan="`+Object.keys(v).length+`">`+k+`</th></tr> </thead> <tbody> <tr></tr> </tbody> </table> `); $.each(v,function(k2,v2){ $('tbody tr',table).append('<td>'+v2+'</td>'); }); table.appendTo('body'); }); 

 table{ width: 200px; margin-bottom: 20px; } td,th{ text-align: center; } 

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