使用javascript从json对象动态添加数据行？

我的网站项目中有一个json文件，如下所示：

[ { "id": "1", "name": "ramesh", "phone": "12345", "salary": "50000" }, { "id": "2", "name": "suresh", "phone": "123456", "salary": "60000" } ] 

这里是样本数据，它有4列，但我不知道我将得到的json数据，将有多少列。 我试图从这个json数据创建一个动态的html表。 这是我现在写的代码：

  $(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); } 

上面的代码工作正常，当我尝试插入数据行时，我遇到问题，下面是无法正常工作的代码：

  //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); }); });  

请帮帮我。 谢谢

Answer 1

您访问单元格数据的方式是错误的。 例如，要访问第一个对象的id ，您需要执行data[0]["id"] ，而您的代码会尝试执行data[0][0] 。 代码的工作示例：

 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); 

Answer 2

根据我能解释的内容，您可以这样做。 访问数组中的每个对象，然后使用键来映射您的值。

但是你所写的示例代码和提供的数据似乎有所不同。

 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]; } }