遍歷多維JSON數據

Question

正在嘗試在HTML表中顯示JSON數據。

樣本JSON數據

[
    {
        "rect": [
        {
            "req": "108",
            "dev": "000",
            "pre": "201",
            "tst": "2019-08-10 18:18:10"
        },
        {
            "req": "107",
            "dev": "000",
            "pre": "210",
            "tst": "2019-08-04 22:05:31"
        },
        {
            "req": "106",
            "dev": "000",
            "pre": "299",
            "tst": "2019-08-04 20:24:40"
        },
        {
            "req": "105",
            "dev": "000",
            "pre": "210",
            "tst": "2019-08-04 20:24:29"
        },
        {
            "req": "104",
            "dev": "000",
            "pre": "290",
            "tst": "2019-08-04 20:16:07"
        },
        ],
        "ntif": {
            "notification": 6
        }
    }
]

這是我的JavaScript，

success: function(JSONObject) {
    var peopleHTML = "";


    for (var key in JSONObject) {
        if (JSONObject.hasOwnProperty(key)) {
          peopleHTML += "<tr>";
          peopleHTML += "<td>" + JSONObject["rect"][key]["req"] + "</td>";
          peopleHTML += "<td>" + JSONObject["rect"][key]["pre"] + "</td>";
          peopleHTML += "</tr>";
    }


}


    $("#people tbody").html(peopleHTML);

}

產量

加載頁面時，只有前3個對象被放入HTML表中，其余數據未在表中顯示。
如何在表格中顯示整個數據？

Answer 1

您可以一次使用double forEach依次迭代外部數組和內部數組。

 let data = [{ "rect": [{ "req": "108", "dev": "000", "pre": "201", "tst": "2019-08-10 18:18:10" }, { "req": "107", "dev": "000", "pre": "210", "tst": "2019-08-04 22:05:31" }, { "req": "106", "dev": "000", "pre": "299", "tst": "2019-08-04 20:24:40" }, { "req": "105", "dev": "000", "pre": "210", "tst": "2019-08-04 20:24:29" }, { "req": "104", "dev": "000", "pre": "290", "tst": "2019-08-04 20:16:07" }, ], "ntif": { "notification": 6 } }] let peopleHTML = ''; data.forEach(function(items) { items.rect.forEach(function(elem) { peopleHTML += `<tr> <td>${elem.req}</td> <td>${elem.pre}</td> </tr>` }) }) $("#people tbody").html(peopleHTML); 

 table tbody tr td { border: 1px solid black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id='people'> <tbody></tbody> </table> 

Answer 2

您也可以直接迭代rect數組。

 let data = [{ "rect": [{ "req": "108", "dev": "000", "pre": "201", "tst": "2019-08-10 18:18:10" }, { "req": "107", "dev": "000", "pre": "210", "tst": "2019-08-04 22:05:31" }, { "req": "106", "dev": "000", "pre": "299", "tst": "2019-08-04 20:24:40" }, { "req": "105", "dev": "000", "pre": "210", "tst": "2019-08-04 20:24:29" }, { "req": "104", "dev": "000", "pre": "290", "tst": "2019-08-04 20:16:07" }, ], "ntif": { "notification": 6 } }] let peopleHTML = ''; [].forEach.call(data[0].rect, function(elem) { peopleHTML += `<tr> <td>${elem.req}</td> <td>${elem.pre}</td> </tr>` }); $("#people tbody").html(peopleHTML); 

 table tbody tr td { border: 1px solid black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id='people'> <tbody></tbody> </table>