Как перебирать объекты JSON со многими узлами массива JSON jQuery - PullRequest
Новая
       63

Как перебирать объекты JSON со многими узлами массива JSON jQuery

0 голосов
/ 11 декабря 2018

Я пытаюсь перебрать объекты JSON с помощью jQuery в вызове AJAX, а затем распечатать объекты на html-странице.Я наткнулся на этот пост, посвященный стековому потоку, который показывает, как перебирать объекты json Который работал до определенного момента.

Я могу отобразить все значения из объекта с идентификатором ": 1, но у меня возникают проблемы при попытке отобразить больше значений после этого. Поэтому, например, я хотел бы отобразить значения, которые хранятся в"id": 2 и т. д.

Данные JSON генерируются программным обеспечением https://openhardwaremonitor.org.

Вот как выглядят данные JSON в короткой версии, а вот полная версия 

{
"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 возвращает длину как 1, что является проблемой, так как я ожидаю, что длина будет больше 1.

Ответы [ 3 ]

0 голосов
/ 11 декабря 2018

Вы можете использовать приведенный ниже код в зависимости от того, какой подпункт вы хотите

. Предположим, вы сохранили объект json в js var с именем 'json_data' 

for (item in json_data) {
    for (subItem in Children[item]) {
        alert(json_data[item][subItem].id);
    }
}
0 голосов
/ 11 декабря 2018

Согласно тому, что я понял, вам нужно достичь каждого отдельного объекта внутри вложенного массива, этот плоский подход может помочь.Не забывайте, что параметр 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
    }
0 голосов
/ 11 декабря 2018

Измените код тега сценария на этот 

$.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 : этот код не тестировался, но только для того, чтобы дать вам идею для вашего решения

...