如何將JSON數據映射到Javascript表中

Question

我有這個Json數據：

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

我需要使用javascript在表格中顯示數據部分。 我試過了，但是它顯示了只有第一行的表，我如何進行更改，以便顯示所有行（表示我傳遞的任何大小的數據）。

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。 Ive還簡化了您的代碼（請注意：其ES6）...

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