使用javascript显示表中关联数组的数据

Question

我在表格中显示关联数组的数据时遇到问题。 这是我的代码：

$.getJSON('json/data.json', function(data){
    var items=[];
    $.each(data, function(key, val){
        $.each(val, function(keyItem, valItem){
            items.push('<td>'+valItem+'</td>');
        });
        $('<tr/>', {html: items.join('')}).appendTo('.table tbody');
    });
});

这是我的阵列：

[
    {
        "firstName": "Mike",
        "lastName": "Winston",
        "sex": "male",
        "age": "28"
    },
    {
        "firstName": "Mikki",
        "lastName": "Grathem",
        "sex": "female",
        "age": "21"
    },
    {
        "firstName": "Nick",
        "lastName": "Malboro",
        "sex": "male",
        "age": "31"
    }
]

我需要将数组的数据显示在表的新行中。现在我有这样的情况：

哪里出错？

Answer 1

您需要为每行清空$.getJSON('json/data.json', function(data){ var items=[]; $.each(data, function(key, val){ items=[]; $.each(val, function(keyItem, valItem){ items.push('<td>'+valItem+'</td>'); }); $('<tr/>', {html: items.join('')}).appendTo('.table tbody'); }); }); 数组：

Scribus

Answer 2

在正确的位置重置项目：

$.getJSON('json/data.json', function(data){
    $('.table tbody').append(
       data.map(function (row) {
           return $('<tr/>').append(
               Object.keys(row).map(function (key) {
                   return $('<td/>').text(row[key]);
               });
           );
       });
    );
});

另一种方法是执行此ES5 + /功能样式（未经测试）：

&&

Answer 3

您不会在迭代之间清空数组，因此所有项目都堆积起来并创建越来越多的列。您应该在items函数中移动$.each数组，因此每个项目都会为空。

＆＃13;

＆＃13;

var data = [{
  "firstName": "Mike",
  "lastName": "Winston",
  "sex": "male",
  "age": "28"
}, {
  "firstName": "Mikki",
  "lastName": "Grathem",
  "sex": "female",
  "age": "21"
}, {
  "firstName": "Nick",
  "lastName": "Malboro",
  "sex": "male",
  "age": "31"
}];


function process(data) {
  $.each(data, function(key, val) {
    var items = [];
    $.each(val, function(keyItem, valItem) {
      items.push('<td>' + valItem + '</td>');
    });
    $('<tr/>', {
      html: items.join('')
    }).appendTo('.table tbody');
  });
}

process(data);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table"><tbody></tbody></table>

＆＃13;

＆＃13;

＆＃13;