使用javascript从json对象动态添加数据行？ [英] Adding data rows dynamically from a json object using javascript?

问题描述

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

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

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

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

推荐答案

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

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>

这篇关于使用javascript从json对象动态添加数据行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！