Javascript 在jquery中打印json数组

我试图在表中打印JSON数组。这是我的密码。有什么建议吗？提前谢谢

[
{
“id”：1，
“名称”：“名称1”，
“年龄”：10岁，
“反馈”：“反馈1”
},
{
“id”：2，
“名称”：“名称2”，
“年龄”：90岁，
“反馈”：“反馈2”
},
{
“id”：3，
“名称”：“名称3”，
“年龄”：30岁，
“反馈”：“反馈3”
},
{
“id”：4，
“名称”：“名称4”，
“年龄”：50岁，
“反馈”：“反馈4”
}
]
var fileName=“”；
函数GridLibrary（文件名）{
this.fileName=文件名；
}
GridLibrary.prototype={
set_fileName:函数（文件名）{
this.fileName=文件名；
},
获取文件名：函数（）{
返回此文件名；
}
};
GridLibrary.prototype.display=函数（）{
$.ajax({
url:this.get_fileName（），
错误：函数（即，e）{
控制台日志（e）；
},
成功：功能（数据）{
//打印钥匙
var Mytable=“”；
$。每个（数据[0]，函数（键，值）{
$（'body'）。追加（'p>您正在为每个
创建一个新的
，而键和数据点需要位于同一

添加如下内容：

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

$（'body'）。追加（“”）；
$（'body tr.keys'）.append（'我通常会执行以下操作，您可以用自己的数组替换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>

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

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

JavaScript:

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

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

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

var json=[{
“名字”：“拉里”，
“lastname”：“Lane”，
“电话1”：“111-111-1111”
}, {
“名字”：“吉普赛人”，
“lastname”：“Lane”，
“电话1”：“111-111-1111”
}];
//数组来保存表的html
var html=[]；
//添加开始表和表体标记
html.push（“\n”）；
//开始添加表标题
html.push（“”）；
//循环遍历第一个对象的属性名称
for（json[0]中的var propertyNames]）{//begin for in循环
html.push（“+propertyNames+”）；
}//循环结束
html.push（“”）；
//循环遍历对象数组
forEach（函数（项）{//begin forEach
//添加开始表行标记
html.push（“”）；
//循环遍历每个对象属性
for（var key in item）{//begin for in循环
//附加包含对象属性值的表数据
html.push（“+项[键]+”）；
}//在循环中结束
//添加结束表行标记
html.push（“”）；
})；//结束forEach
//添加结束表和表体标记
html.push（“\n”）；
//测试结果的显示
document.getElementById（“结果”）.innerHTML=html.join（“”）；
您正在使用两种不同的方法来输出标记

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

不仅如此，对于每个单元格重复更新页面上的标记是一种很糟糕的做法，而且非常不实用。
您可以尝试一下：

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

var表=[{
“id”：1，
“名称”：“名称1”，
“年龄”：10岁，
“反馈”：“反馈1”
}, {
“id”：2，
“名称”：“名称2”，
“年龄”：90岁，
“反馈”：“反馈2”
}, {
“id”：3，
“名称”：“名称3”，
“年龄”：30岁，
“反馈”：“反馈3”
}, {
“id”：4，
“名称”：“名称4”，
“年龄”：50岁，
“反馈”：“反馈4”
}];
函数addTable（tableData）{
变量表=$（''）；
var tableHeading=$（''）；
对于（tableData[0]中的变量标题）{
如果（！tableData[0].hasOwnProperty（标题））
继续；
var headingColumn=$（''+标题+''）；
标题栏。附录（表格标题）；
}
表标题。附录（表）；
tableData.forEach（（rowData）=>{
变量行=$（''）；
for（rowData中的var columnData）{
如果（！rowData.hasOwnProperty（columnData））
继续；
var column=$（''+rowData[columnData]+''）；
列。追加到（行）；
}
行。附录（表）；
});
表.附录（“正文”）；
}
addTable（表）；

小提琴：

请注意，这不会检查以确保每行中的列数相同。如果需要，可以添加此类处理。
Larry Lane的示例给出了我的意思的完整代码，它应该很容易适应您的情况。这段代码让我畏缩，原因有两个。1.js对象键无序，每行可以有不同的列租金顺序，如果您总是在json[0]上迭代，至少您会得到一致的顺序，尽管这是不可预测的。2.将文本和html（如：
“+item[key]+”
）连接在一起会导致编码问题和注入漏洞。因为问题是关于jQuery的，
$（“”）。text（item[key]）
是一个更好的建议，而不是在字符串路径的数组中发送一些（速度更快但有问题）。