You would need to assign identified to each table column such that you can access it. Further, given jsondata is fetched from outside, you need to populate the table dynamically (to get the right number of rows)
Try something like below:
var el_up = document.getElementById("GFG_UP");
var list = [
{ "col_1": "val_11", "col_3": "val_13" },
{ "col_2": "val_22", "col_3": "val_23" },
{ "col_1": "val_31", "col_3": "val_33" }
];
el_up.innerHTML = "Click on the button to create "
+ "the table from the JSON data.<br><br>"
+ JSON.stringify(list[0]) + "<br>"
+ JSON.stringify(list[1]) + "<br>"
+ JSON.stringify(list[2]);
function constructTable(selector) {
var cols = Headers(list, selector);
for (var i = 0; i < list.length; i++) {
var row = $('<tr/>');
for (var colIndex = 0; colIndex < cols.length; colIndex++)
{
var val = list[i][cols[colIndex]];
if (val == null) val = "";
row.append($('<td/>').html(val));
}
$(selector).append(row);
}
}
function Headers(list, selector) {
var columns = [];
var header = $('<tr/>');
for (var i = 0; i < list.length; i++) {
var row = list[i];
for (var k in row) {
if ($.inArray(k, columns) == -1) {
columns.push(k);
header.append($('<th/>').html(k));
}
}
}
$(selector).append(header);
return columns;
}
Refer:
How to convert JSON data to a html table using JavaScript/jQuery ? - GeeksforGeeks[
^]