up vote 1 down vote favorite

I have a json file in my website project, like this:

 [
  {
"id": "1",
"name": "ramesh",
"phone": "12345",
"salary": "50000"
  },

  {
"id": "2",
"name": "suresh",
"phone": "123456",
"salary": "60000"
  }
]

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:

<script>
    $(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 < totalColumns; i++) {
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = columnNames[i];
                row.appendChild(headerCell);
            }

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:

            //Add the data rows.
            //for (var i = 1; i < data.length; i++) {
            //    row = table.insertRow(-1);
            //    for (var j = 0; j < totalColumns; j++) {
            //        var cell = row.insertCell(-1);
            //        cell.innerHTML = customers[i][j];
            //    }
            //}

           var dvTable = document.getElementById("dvTable");
           dvTable.innerHTML = "";
           dvTable.appendChild(table);
        });
    });
</script>

Please help me with that. Thanks

share|improve this question
1  
Why don't you use jQuery to build your table? It would be easier with something like $("<table>").append("<tr>").append("<td>") BTW this is so easy to do with Angular and a simple ngRepeat, if you want to give it a go instead of jQuery. – Jeremy Thille yesterday
    
thanks for your suggestion @JeremyThille , let me see it with angular js. – Mogli yesterday
    
@JeremyThille I am following this link spring.io/guides/gs/consuming-rest-angularjs but in this link they are creating a html table as they know the column names in json response, is there any way to get number of columns and there names dynamically ? – Mogli 23 hours ago
up vote 0 down vote accepted

The way you are accessing the cell data is wrong. For example, to access id of first object, you've to do data[0]["id"], instead your code tries to do data[0][0]. Working example of your code:

var data = [{
    "id": "1",
    "name": "ramesh",
    "phone": "12345",
    "salary": "50000"
  },

  {
    "id": "2",
    "name": "suresh",
    "phone": "123456",
    "salary": "60000"
  }
];
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 < totalColumns; i++) {
  var headerCell = document.createElement("TH");
  headerCell.innerHTML = columnNames[i];
  row.appendChild(headerCell);
}

// Add the data rows.
for (var i = 0; i < data.length; i++) {
  row = table.insertRow(-1);
  columnNames.forEach(function(columnName) {
    var cell = row.insertCell(-1);
    cell.innerHTML = data[i][columnName];
  });
}

var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
<div id="dvTable"></div>

share|improve this answer
up vote 1 down vote

Based on what I can interpret, you can just do this. Access each object inside the array, then use the keys to map your values.

But what you've written as your example code and your provided data seems different.

let data = [
  {
"id": "1",
"name": "ramesh",
"phone": "12345",
"salary": "50000"
  },

  {
"id": "2",
"name": "suresh",
"phone": "123456",
"salary": "60000"
  }
];

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

for (let item of data) {
    row = table.insertRow(-1);
    for (let key in item) {
        var cell = row.insertCell(-1);
        cell.innerHTML = item[key];
    }
}
<table id="table">
</table>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.