JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mydata">
  <b>Current data in the system ...</b>
  <table id="myTableData" border="1" cellpadding="2">
    <tr>
      <td>&nbsp;</td>
      <td><b>Name</b></td>
      <td><b>Age</b></td>
    </tr>
  </table>
  &nbsp;
  <br/>
</div>

JavaScript

function loadData() {
  var text = '{"employees":[{"firstName":"Ben","lastName":"dsafsad" },{"firstName":"Peter","lastName":"dsdsaadsj" },{"firstName":"Jules","lastName":"MIAU" }]}';

  obj = JSON.parse(text);
  console.log(obj);
  console.log(obj.length);
  console.log(obj.employees.length);
  for (var i = 0; i < obj.employees.length; i++) {
    var currentObj = obj.employees[i];
    console.log(currentObj);
    var myName = currentObj.firstName;
    console.log(myName);
    var age = currentObj.lastName;
    console.log(age);

    var table = document.getElementById("myTableData");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    row.insertCell(0).innerHTML = '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
    row.insertCell(1).innerHTML = myName;
    row.insertCell(2).innerHTML = age;
  }
}
loadData();