在 jquery 中打印 json 数组

你可以试一试：

var table = [{
  "id": 1,
  "name": "name1",
  "age": 10,
  "feedback": "feedback1"
}, {
  "id": 2,
  "name": "name2",
  "age": 90,
  "feedback": "feedback2"
}, {
  "id": 3,
  "name": "name3",
  "age": 30,
  "feedback": "feedback3"
}, {
  "id": 4,
  "name": "name4",
  "age": 50,
  "feedback": "feedback4"
}];
function addTable(tableData) {
  var table = $('<table>');
  var tableHeading = $('<tr>');

  for (var title in tableData[0]){
    if (! tableData[0].hasOwnProperty(title))
        continue;
    var headingColumn = $('<th>'+ title +'</th>');
    headingColumn.appendTo(tableHeading);
  }
  tableHeading.appendTo(table);
  tableData.forEach((rowData)=>{
    var row  = $('<tr>');
    for (var columnData in rowData) {
      if (! rowData.hasOwnProperty(columnData))
        continue;
      var column = $('<td>' + rowData[columnData] + '</td>');
      column.appendTo(row);
    }
    row.appendTo(table);
  });
  table.appendTo('body');
}
addTable(table);

小提琴：https://jsfiddle.net/41g8g9Lc/1/

请注意，这不会检查以确保每行中的列数相同。如果需要，可以添加这种处理。

我通常会做如下的事情， 你可以用你自己的数组替换 json 数组：

现场示例

.HTML：

<h2>An Example of Turning an Array of Objects into a Html Table</h2>
<div id="left">&nbsp;</div>
<div id="results"></div>
<div id="right">&nbsp;</div>

CSS（可选）：

body {
  background: gray;
}
#results,
#left,
#right {
  float: left;
}
#left {
  width: 33.33%;
}
#right {
  width: 33.3%;
}
#results {
  width: 33.33%;
}
h2{
  font-family:georgia;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: teal;
  color: #f0ffff;
}
td,
th {
  border: black solid 1px;
  padding: 5px;
}
td {
  background-color: teal;
  color: white;
}
th {
  background-color: blue;
  color: white;
  font-family: georgia;
}

JavaScript：

var json = [{
  "firstname": "Larry",
  "lastname": "Lane",
  "phone1": "111-111-1111"
}, {
  "firstname": "Gypsy",
  "lastname": "Lane",
  "phone1": "111-111-1111"
}];
//array to hold the html for the table
var html = [];
//add the opening table and tablebody tags
html.push("<table>'n<tbody>");

//begin adding the table headers
html.push("<tr>");
//loop through the property names of the first object
for(var propertyNames in json[0]){//begin for in loop
  html.push("<th>" + propertyNames  + "</td>");
}//end for in loop
html.push("</tr>");
//loop through the array of objects
json.forEach(function(item) { //begin forEach
  //add the opening table row tag
  html.push("<tr>");
  //loop though each of the objects properties
  for (var key in item) { //begin for in loop
    //append the table data containing the objects property value
    html.push("<td>" + item[key] + "</td>");
  } //end for in loop
  //add the closing table row tag
  html.push("</tr>");
}); //end forEach
//add the closing table and table body tags
html.push("<table>'n</tbody>");
//testing display of results
document.getElementById("results").innerHTML = html.join("");

你使用两种不同的方法来输出标记。

如果要使用字符串串联，请将其用于整个表。关键是，您在创建行和单元格后追加<table></table>正文。

不仅如此，重复更新页面上每个单元格的标记只是糟糕的做法，而且性能非常差。

您正在为每个<td>创建一个新<tr>，而键和数据点需要位于同一<tr>

添加类似以下内容：

   $('body').append('<tr id="keys"></tr>');
   $('body tr.keys').append('<td id="div' + key + '" </td>');

然后，您需要为要附加到表的每组数据点创建一个新的表行，然后遍历数据以创建<td>。