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

【问题标题】：Adding data rows dynamically from a json object using javascript?使用javascript从json对象动态添加数据行？
【发布时间】：2017-10-28 16:56:26
【问题描述】：

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

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

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

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

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

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

            //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>

请帮帮我。谢谢

【问题讨论】：

为什么不使用 jQuery 来构建表格？使用 $("<table>").append("<tr>").append("<td>") BTW 之类的东西会更容易，如果您想尝试一下而不是 jQuery，那么使用 Angular 和简单的 ngRepeat 很容易做到这一点。
感谢@JeremyThille 的建议，让我用angular js 看看。
@JeremyThille 我正在关注此链接spring.io/guides/gs/consuming-rest-angularjs 但在此链接中他们正在创建一个 html 表，因为他们知道 json 响应中的列名，有没有办法获取列数和名称动态的？

标签： javascript jquery html json

【解决方案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);

&lt;div id="dvTable"&gt;&lt;/div&gt;

【讨论】：

【解决方案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];
    }
}

<table id="table">
</table>

【讨论】：