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

Question

I'm trying to loop through JSON objects with jQuery in an AJAX call and then print the objects in html page. I came across this stackoverflow post that shows you how to loop through json objects. Which worked to a certain point.

I am able to display all the values from object with id": 1, but I'm having trouble trying to display more values after that. So for example I would like to display the values that are stored in "id": 2 and so on.

The JSON data is generated by https://openhardwaremonitor.org software.

Here's how the JSON data looks like in short version , and here's the 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": [
                            {

Here's the code that I currently have

<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>

I can't seem to wrap my head around this problem.

var data = result.Children returns length as 1, which is the issue here as I'm expecting the length to be larger than 1.

Answer 1

According to what I understood, you need to reach every single object, inside the nested array, this flat approach may help. Don't forget that the parameter obj, is the actual object you need to run through.

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
    }

Answer 2

Change script tag code to this

$.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;
}

The issue with your approach was that you were getting the children only of the parent. Your JSON has tree structure so you will have to recursively parse all children.

PS: This code is not tested but only to give you the idea for your solution

Answer 3

you could use the below code depending on, which sub item you want

lets suppose you have save the json object in js var named 'json_data'

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