title: Adding data rows dynamically from a json object using javascript?
body: <p>I have a json file in my website project, like this:</p>
  
  <pre><code> [
    {
  "id": "1",
  "name": "ramesh",
  "phone": "12345",
  "salary": "50000"
    },
  
    {
  "id": "2",
  "name": "suresh",
  "phone": "123456",
  "salary": "60000"
    }
  ]
  </code></pre>
  
  <p>Here it is the sample data, It has 4 columns but i don't know that my json data which i will get, will have how many number of columns. I am trying to create a dynamic html table from this json data. This is the code i have write now:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          var jsonitems = [];
          $.getJSON("json.json", function (data) {
              var totalColumns = Object.keys(data[0]).length;
              var columnNames = [];
              columnNames = Object.keys(data[0]);
  
              //Create a HTML Table element.
              var table = document.createElement("TABLE");
              table.border = "1";
  
              //Add the header row.
              var row = table.insertRow(-1);
              for (var i = 0; i &lt; totalColumns; i++) {
                  var headerCell = document.createElement("TH");
                  headerCell.innerHTML = columnNames[i];
                  row.appendChild(headerCell);
              }
  </code></pre>
  
  <p>above code is working, I am facing problem when i try to insert data rows, below is the code for that which is not working:</p>
  
  <pre><code>            //Add the data rows.
              //for (var i = 1; i &lt; data.length; i++) {
              //    row = table.insertRow(-1);
              //    for (var j = 0; j &lt; totalColumns; j++) {
              //        var cell = row.insertCell(-1);
              //        cell.innerHTML = customers[i][j];
              //    }
              //}
  
             var dvTable = document.getElementById("dvTable");
             dvTable.innerHTML = "";
             dvTable.appendChild(table);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Please help me with that.
  Thanks </p>