JSON data to a table in HTML

Question

How to get JSON data to a table in HTML

I am getting back JSON data and trying to append to a table as below but it is not working

  <table>
<thead>
        <tr>SerialNo</tr>
        <tr>Name</tr>
    </thead>
<tbody id="dynamicTbody"></tbody>
</table>


$.getJSON(url, function (json) {

    ADD JSON DATA TO THE TABLE 
    for (var i = 0; i < json.records.length; i++) {

 $('#dynamicTbody').append('<tr><td>'+json.records[i].SerNo.SerialNo+'</td><td>'+json.records[i].name.Name+'</td></tr>')
}}

have edited this since my question was not clear enough

Answer 1

 const records = [ {SerialNo: 1, name: 'User 1'}, {SerialNo: 2, name: 'User 2'}, {SerialNo: 3, name: 'User 3'}, {SerialNo: 4, name: 'User 4'}, {SerialNo: 5, name: 'User 5'}, ]; const table = document.createElement('TABLE'); records.forEach(record => { let row = table.insertRow(); row.insertCell().appendChild(document.createTextNode(record.SerialNo)); row.insertCell().appendChild(document.createTextNode(record.name)); }); document.getElementById('JSONdata').appendChild(table); 

 <div id="JSONdata"></div>