2

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.

Vlad Vasiljev
  • 55
  • 7
  • you should turn your js response to JSON. Use JSON.parse – cralfaro Dec 11 '18 at 14:59
  • looks like your AJAX response returned you result.Children that holding only one Children ... if you will see result.Children[0].Children ... you have array that have more than 1. you need to write an recursive function that iterate all children -> children and print them to DOM – shushu304 Dec 11 '18 at 15:00
  • @cralfaro why is it currently working then? OP's issue has nothing to do with JSON.parse – charlietfl Dec 11 '18 at 15:01
  • First you need to determine how you want all this nested data represented in a flat table ( or tables). Then you will need to recursively map all the children into a flatter array structure to accommodate expected output – charlietfl Dec 11 '18 at 15:04

3 Answers3

1

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);
    }
}
Ankur Choudhury
  • 189
  • 2
  • 13
0

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

Farrukh Shahzad
  • 51
  • 3
0

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
    }
jgutierrez
  • 26
  • 1
  • 5