Unable to parse json using javascript

Question

I have a json which i'm trying to parse it using javascript. Iteration count and the pages getting appended to it are going to be dynamic.

Expected Result

Just like the above image i'm able to take dynamic iteration keys from the below mentioned json.

Iteration.json

{
    "count":[
    {
    "iteration1":[
    {
    "PageName":"T01_Launch"
    },
    {
    "PageName":"T02_Login"
    }
    ]
    },
    {
    "iteration2":[
    {
    "PageName":"T01_Launch"
    },
    {
    "PageName":"T02_Login"
    }
    ]
    }
    ]
}

When i click on iteration it has to populate the corresponding pagenames for that particular iteration as shown in expected result image. But what i get actually is (refer the image below):

Please find the code that i tried:

     var pagenamearray = [];

$.getJSON("iteration.json", function(json) {
    var hits = json.count;

    var iterations, tnname, iteration;

    for (var k in hits) {
        var value;
        if (hits.hasOwnProperty(k)) {
            value = hits[k];
            var iteratearray = [];

            for (var j in value) {

                if (value.hasOwnProperty(j)) {

                    j;

                    var check = value[j];

                    for (var i in check) {

                        if (check.hasOwnProperty(i)) {

                            var test = check[i];

                            for (var t in test) {

                                if (test.hasOwnProperty(t)) {


                                    var pagename = JSON.stringify(t)


                                    var arr = []
                                    if (pagename.includes("PageName")) {


                                        //alert("Key is " +pagename + ", value is" + JSON.stringify(test[t]));

                                        for (var it = 0; it < hits.length; it++) {

                                            if ((Object.keys(hits[it])).includes(j)) {
                                                var pagenamevalue = test[t];
                                                arr[it] = [];
                                                arr.push(pagenamevalue);
                                            }

                                        }
                                    }
                                    //alert(arr)

                                }
                                pagenamearray.push(arr);

                            }
                        }

                    }

                }

                var row = document.createElement('div');
                row.setAttribute("class", "row");
                row.setAttribute("id", j)

                var gridWidth = document.createElement('div');
                gridWidth.setAttribute("class", "col-lg-12");

                var panelRoot = document.createElement('div');
                panelRoot.setAttribute("class", "panel panel-default");

                var panelHeading = document.createElement('div');
                panelHeading.setAttribute("class", "panel-heading");

                var heading3 = document.createElement('a');
                heading3.setAttribute("class", "panel-title");

                var icon = document.createElement('i');
                icon.setAttribute("class", "fa fa-long-arrow-right fa-fw");

                heading3.appendChild(icon);
                heading3.innerHTML = j;
                heading3.setAttribute("onclick", "doit('" + j + "');");

                panelHeading.appendChild(heading3);
                /*        var panelBody=document.createElement('div');
                        panelBody.setAttribute("class","panel-body");
                        panelBody.setAttribute("id","panellinks");*/

                panelRoot.appendChild(panelHeading);
                //     panelRoot.appendChild(panelBody)
                gridWidth.appendChild(panelRoot);
                row.appendChild(gridWidth);
                document.getElementById("analysis").appendChild(row);




            }


        }


    }

});

function doit(value) {
    var ul = document.getElementById(value);
    if (ul != undefined) {
        $("#" + "expandlinks").remove();
        $("#" + value + value).remove();
    }

    var accordion = document.getElementById(value);

    var panelBody = document.createElement('div');

    panelBody.setAttribute("class", "panel-body");
    panelBody.setAttribute("id", "expandlinks")

    var tablediv = document.createElement('div')
    var tablelink = document.createElement('a');
    tablediv.appendChild(tablelink);
    var graphdiv = document.createElement('div')
    var graphlink = document.createElement('a');
    graphdiv.appendChild(graphlink);
    var recommndiv = document.createElement('div');
    var recommendlink = document.createElement('a');
    recommndiv.appendChild(recommendlink)

    //alert(pagenamearray.length)
    tablelink.innerHTML = pagenamearray;
    /*graphlink.innerHTML="Timeline View";
    recommendlink.innerHTML="Recommendations";*/
    panelBody.appendChild(tablediv);

    panelBody.appendChild(recommndiv);
    panelBody.appendChild(graphdiv);
    accordion.appendChild(panelBody);


}

Any advise on how to achieve this would be of great help. Thanks in advance.

Answer 1

I think the problem is how you assign the pagenamearray to tablelink.innerHTML. This converts the array to a string, converting all elements in the array to a string too and separating them by a comma each. However, your pagenamearray contains some empty arrays too; these will convert to an empty string in the process, but will still have a comma before and after them.

In your example code above, the pagenamearray will end up with a value of [[[],"T01_Launch"],[[],"T02_Login"],[null,[],"T01_Launch"],[null,[],"T02_Login"]] - when converted to a String, this will result in ",T01_Launch,,T02_Login,,,T01_Launch,,,T02_Login". So instead of assigning it to the innerHTML value directly, you'll first have to filter out the empty arrays and null values.