JSFiddle - React, Tailwind, and code Playground

by AmrendraKumar

HTML

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <table id="myTable" border='1|1'></table>
    <script>
      const userObjectArray = [{
        name: "Ajay",
        age: 27,
        height: 5.10,
        address: "Bangalore"
      }, {
        name: "Vijay",
        age: 24,
        height: 5.10,
        address: "Bangalore"
      }, {
        name: "Dinesh",
        age: 27,
        height: 5.10,
        address: "Bangalore"
      }];
      const headers = Object.keys(userObjectArray[0]);
      var tr1 = document.createElement('tr');
      var htmlHeaderStr = '';
      for (let i = 0; i < headers.length; i++) {
        htmlHeaderStr += "<th>" + headers[i] + "</th>"
      }
      tr1.innerHTML = htmlHeaderStr;
      document.getElementById('myTable').appendChild(tr1);

      for (var j = 0; j < userObjectArray.length; j++) {
        var tr = document.createElement('tr');
        var htmlDataString = '';
        for (var k = 0; k < headers.length; k++) {
          htmlDataString += "<td>" + userObjectArray[j][headers[k]] + "</td>"
        }
        tr.innerHTML = htmlDataString;
        document.getElementById('myTable').appendChild(tr);
      }

    </script>
  </body>

</html>