如何循环遍历具有许多 JSON 个数组节点 jQuery 的 JSON 个对象

Question

我试图在 AJAX 调用中使用 jQuery 遍历 JSON 个对象，然后在 html 页面中打印这些对象。我遇到了。这在一定程度上起作用了。

我能够显示 ID 为“: 1 的对象的所有值，但我在尝试显示更多值之后遇到了问题。例如，我想显示存储在 "id": 2 以此类推。

JSON数据由https://openhardwaremonitor.org软件生成。

以下是 JSON 数据在短版中的样子，这是 full version

{
"id": 0,
"Text": "Sensor",
"Min": "Min",
"Value": "Value",
"Max": "Max",
"ImageURL": "",
"Children": [
    {
        "id": 1,
        "Text": "LAPTOP-4CG0QVS4",
        "Min": "",
        "Value": "",
        "Max": "",
        "ImageURL": "images_icon/computer.png",
        "Children": [
            {
                "id": 2,
                "Text": "ASUS FX504GM",
                "Min": "",
                "Value": "",
                "Max": "",
                "ImageURL": "images_icon/mainboard.png",
                "Children": []
            },
            {
                "id": 3,
                "Text": "Intel Core i7-8750H",
                "Min": "",
                "Value": "",
                "Max": "",
                "ImageURL": "images_icon/cpu.png",
                "Children": [
                    {
                        "id": 4,
                        "Text": "Clocks",
                        "Min": "",
                        "Value": "",
                        "Max": "",
                        "ImageURL": "images_icon/clock.png",
                        "Children": [
                            {

这是我目前拥有的代码

<script>
    var url = 'https://api.myjson.com/bins/sa41o';

    $.ajax({
        url: url,
        method: 'GET',
    }).done(function (result) {
        var data = result.Children;
        //console.log(result.Children.length);
        var i = 0;
        var hosData = "<table border='1'>";
        hosData += "<tr>";

        hosData += "<th>";
        hosData += 'id';
        hosData += "</th>";

        hosData += "<th>";
        hosData += 'Text';
        hosData += "</th>";

        hosData += "<th>";
        hosData += 'Min';
        hosData += "</th>";

        hosData += "<th>";
        hosData += 'Value';
        hosData += "</th>";

        hosData += "<th>";
        hosData += 'Max';
        hosData += "</th>";

        hosData += "<th>";
        hosData += 'ImageURL';
        hosData += "</th>";

        hosData += "</tr>";
        for (i = 0; i < data.length; i++) {
            hosData += "<tr>";

            hosData += "<td>";
            hosData += data[i].id;
            hosData += "</td>";

            hosData += "<td>";
            hosData += data[i].Text;
            hosData += "</td>";

            hosData += "<td>";
            hosData += data[i].Min;
            hosData += "</td>";

            hosData += "<td>";
            hosData += data[i].Value;
            hosData += "</td>";

            hosData += "<td>";
            hosData += data[i].Max;
            hosData += "</td>";

            hosData += "<td>";
            hosData += data[i].ImageURL;
            hosData += "</td>";



            hosData += "</tr>";
        }
        hosData += "</table>";

        $("#data").html(hosData);
    }).fail(function (err) {
        throw err;
    });


<script

.

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

</div>

我似乎无法解决这个问题。

var data = result.Children returns 长度为 1，这是这里的问题，因为我希望长度大于 1。

Answer 1

将脚本标签代码更改为此

$.ajax({
    url: url,
    method: 'GET',
}).done(function (result) {
    var data = result.Children;
    //console.log(result.Children.length);
    var i = 0;
    var hosData = "<table border='1'>";
    hosData += "<tr>";

    hosData += "<th>";
    hosData += 'id';
    hosData += "</th>";

    hosData += "<th>";
    hosData += 'Text';
    hosData += "</th>";

    hosData += "<th>";
    hosData += 'Min';
    hosData += "</th>";

    hosData += "<th>";
    hosData += 'Value';
    hosData += "</th>";

    hosData += "<th>";
    hosData += 'Max';
    hosData += "</th>";

    hosData += "<th>";
    hosData += 'ImageURL';
    hosData += "</th>";

    hosData += "</tr>";
    hostData += parseChildrenTree(result, hosData);
    hosData += "</table>";

    $("#data").html(hosData);
}).fail(function (err) {
    throw err;
});

function parseChildrenTree(results, hosData) { 
   if(results.Children.length <= 0) {
      return;
   }
   for(v in results.Children)
       hosData += "<tr>";

        hosData += "<td>";
        hosData += v.id;
        hosData += "</td>";

        hosData += "<td>";
        hosData += v.Text;
        hosData += "</td>";

        hosData += "<td>";
        hosData += v.Min;
        hosData += "</td>";

        hosData += "<td>";
        hosData += v.Value;
        hosData += "</td>";

        hosData += "<td>";
        hosData += v.Max;
        hosData += "</td>";

        hosData += "<td>";
        hosData += v.ImageURL;
        hosData += "</td>";



        hosData += "</tr>";
        parseChildrenTree(v.Children, hosData);
   }
   return hosData;
}

您的方法存在的问题是您只获取了父项的子项。您的 JSON 具有树结构，因此您将不得不递归解析所有子项。

PS：此代码未经测试，仅供您参考解决方案

Answer 2

您可以使用下面的代码，具体取决于您想要的子项目

假设您已将 json 对象保存在名为 'json_data'

的 js 变量中

for (item in json_data) {
    for (subItem in Children[item]) {
        alert(json_data[item][subItem].id);
    }
}

Answer 3

据我了解，您需要到达嵌套数组内的每个对象，这种平面方法可能会有所帮助。不要忘记参数 obj，是您需要运行通过的实际对象。

function buildTable(obj) {
        var childrenList = obj.Children.slice();
        var hosData = "<table border='1'>";
        hosData += "<tr>";

        hosData += "<th>";
        hosData += 'id';
        hosData += "</th>";

        hosData += "<th>";
        hosData += 'Text';
        hosData += "</th>";

        hosData += "<th>";
        hosData += 'Min';
        hosData += "</th>";

        hosData += "<th>";
        hosData += 'Value';
        hosData += "</th>";

        hosData += "<th>";
        hosData += 'Max';
        hosData += "</th>";

        hosData += "<th>";
        hosData += 'ImageURL';
        hosData += "</th>";

        hosData += "</tr>";
        currObj = Object.assign({}, obj);
        while(childrenList.length){
            var currObj = childrenList.splice(0, 1)[0];
            childrenList = currObj.Children.concat(childrenList);
            hosData += "<tr>";
            hosData += "<td>";
            hosData += currObj.id;
            hosData += "</td>";
            hosData += "<td>";
            hosData += currObj.Text;
            hosData += "</td>";
            hosData += "<td>";
            hosData += currObj.Min;
            hosData += "</td>";
            hosData += "<td>"
            hosData += currObj.Value;
            hosData += "</td>";
            hosData += "<td>";
            hosData += currObj.Max;
            hosData += "</td>";
            hosData += "<td>";
            hosData += currObj.ImageURL;
            hosData += "</td>";
            hosData += "</tr>";
        }
        hosData += "</table>";
        return hosData
    }

如何循环遍历具有许多 JSON 个数组节点 jQuery 的 JSON 个对象

How to Loop through JSON objects with many JSON array nodes jQuery

javascript

ajax

jquery

json

openhardwaremonitor