Данные JSON в таблицу в HTML

Question

Как получить данные JSON в таблицу в HTML

Я возвращаю данные JSON и пытаюсь добавить таблицу, как показано ниже, но она не работает

  <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>')
}}

отредактировал это, так как мой вопрос не был достаточно ясен

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>