Question

我有这个Json数据：

[{
"metadata": {
    "sortColumn": "Id",
    "sortOrder": "Asc"
},
"data": [{
    "id": "1",
    "name": "Sam",
    "age": "32"
}, {
    "id": "2",
    "name": "tom",
    "age": "22"
}]
}]

我需要使用javascript在Grid中显示数据部分。我尝试了这个，但它显示了一个只有第一行的表，我如何进行更改，以便显示所有行（表示我传递的任何大小的数据）。

function load() {
        data = '[{"metadata": {"sortColumn": "Id","sortOrder": "Asc"},"data": [{"id": "1","name": "Sam","age": "32"}, {"id": "2","name": "tom","age": "22"}]}]';

        var mydata = JSON.parse(data);

        $table = "<table id = 'resultTable'><td>Id</td><td>Name</td><td>Age</td><tr>";

        for (var i = 0; i < mydata.length; i++) {

                $table += "<tr>";

            var it = mydata[i];



            $table += "<td>" + it.data[i].id + "</td>";

            $table += "<td>" + it.data[i].name + "</td>";

            $table += "<td>" + it.data[i].age + "</td>";

            //alert(items[i].duration);
            $table += "</tr>";
        }



        $table += "</table>";

        $('body').append($table);
        $table = "<table id = 'resultTable'><td>Id</td><td>Name</td><td>Age</td><tr>";

Answer 1

您希望循环mydata[0].data这是行数据。

虽然你的结构对外部数组没有意义，因为整个数组中只有一个对象。

如果您删除了外部数组并且它只是一个对象，那么您将遍历mydata.data

function load() {
  data = '[{"metadata": {"sortColumn": "Id","sortOrder": "Asc"},"data": [{"id": "1","name": "Sam","age": "32"}, {"id": "2","name": "tom","age": "22"}]}]';

  var mydata = JSON.parse(data);

  $table = "<table id = 'resultTable'><tr><td>Id</td><td>Name</td><td>Age</td></tr>";

  for (var i = 0; i < mydata[0].data.length; i++) {

    $table += "<tr>";

    var it = mydata[0].data[i];

    $table += "<td>" + it.id + "</td>";
    $table += "<td>" + it.name + "</td>";
    $table += "<td>" + it.age + "</td>";
    //alert(items[i].duration);
    $table += "</tr>";
  }

  $table += "</table>";
  $('body').append($table);
}
load()

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

Answer 2

在这一行：

 $table = "<table id = 'resultTable'><td>Id</td><td>Name</td><td>Age</td><tr>";

当你为每个项目开始一个新行时，将额外的tr放在最后。

Answer 3

$(document.body).append("<table id = 'resultTable'><tr><td>Id</td><td>Name</td><td>Age</td></tr><tr><td>"+mydata[0].data.map(el=>Object.values(el).join("</td><td>")).join("</td></tr><tr><td>")+"</td></tr></table>");

你的主要错误是你想要的数组是mydata [0] .data，而不是mydata。我也简化了你的代码（注意：它的ES6）......

http://jsbin.com/tomitifafe/edit?output

如何映射json数据在Javascript表中显示

3 个答案: