Question

我尝试使用来自JSON结构化数组的数据构建HTML表格，例如：

var myjson = [
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter","lastName": "Jones"}
];

我知道我可以使用：

var tbl = "<table>"

            $.each(myjson, function(x, y) {
                tbl += "<tr>";
                  tbl += "<td>firstName</td>";
                  tbl += "<td>lastName</td>";  
                tbl += "</tr>"; 
                tbl += "<tr>";
                  tbl += "<td>" + y.firstName + "</td>";
                  tbl += "<td>" + y.lastName + "</td>";  
                tbl += "</tr>"; 
              });

tbl += "</table>";

但如果我不知道列名（firstName，lastName）被调用了什么，我怎么能得到相同的结果？如何迭代JSON结构化数组中每个对象的键/值？

在每个数组中，每个对象中的元素数量将相同

Answer 1

使用for...in循环。

for(let key in myjson[0]) console.log(key + ' == ' + myjson[0][key]);

以下是代码的外观（另请参阅JSFiddle）：

var myjson = [{
  "firstName": "John",
  "lastName": "Doe"
}, {
  "firstName": "Anna",
  "lastName": "Smith"
}, {
  "firstName": "Peter",
  "lastName": "Jones"
}];

var keys = [];
for(let key in myjson[0]) keys.push(key);

var tbl = "<table>"

$.each(myjson, function() {
  tbl += "<tr>";
  for(let index in keys) tbl += '<td>' + keys[index] + '</td>';
  tbl += "</tr>";
  tbl += "<tr>";
  for(let index in keys) tbl += '<td>' + arguments[1][keys[index]] + '</td>';
  tbl += "</tr>";
});

tbl += "</table>";

document.body.innerHTML = tbl;

Answer 2

使用Object.keys获取keys的{{1}}。

Object.keys（） 方法返回一个数组字符串，代表所有可枚举属性给定对象的颜色。

使用object index来决定表格的array

＆＃13;

header

＆＃13;

var myjson = [{
  "firstName": "John",
  "lastName": "Doe"
}, {
  "firstName": "Anna",
  "lastName": "Smith"
}, {
  "firstName": "Peter",
  "lastName": "Jones"
}];
var tbl = "<table>";
$.each(myjson, function(x, y) {
  var keys = Object.keys(y);
  if (!x) {
    tbl += "<tr>";
    keys.forEach(function(key) {
      tbl += "<th>" + key + "</th>";
    });
    tbl += "</tr>";
  }
  tbl += "<tr>";
  keys.forEach(function(key) {
    tbl += "<td>" + y[key] + "</td>";
  });
  tbl += "</tr>";
});

tbl += "</table>";
$('body').append(tbl);

＆＃13;

Answer 3

你可以简单地这样做

       var tbl = "<table>"
        $.each(myjson, function(x, y) {
            keys = Object.keys(y);
            tbl += "<tr>";
            $.each(keys, function(i,key){
              tbl += "<td>" + key + "</td>";
            }) 
            tbl += "</tr><tr>"; 
            $.each(keys, function(i,key){
              tbl += "<td>" + y[key] + "</td>";
            }) 
            tbl += "</tr>"; 
          });
         tbl += "</table>";

如果需要，您可以进一步调整到一个循环。

Answer 4

你可以试试这个.. JSFiddle

tbl += "<tr>";
                        for(var i=0;i<Object.keys(myjson[0]).length; i++)
            {                           
                  tbl += "<td>"+Object.keys(myjson[0])[i]+"</td>";                               
             }
            tbl += "</tr>";

在不知道密钥名称的情况下从JSON对象数组中获取键/值

4 个答案: