无法使用javascript解析json

我有一个json，我正试图用javascript解析它。迭代计数和附加到它的页面将是动态的

预期结果

就像上面的图片一样，我能够从下面提到的json中获取动态迭代键

Iteration.json

当我单击迭代时，它必须为该特定迭代填充相应的页面名，如预期结果图像所示。但实际上我得到的是（参考下图）：

请查找我尝试的代码：

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


}

var pagenamearray=[]；
$.getJSON（“iteration.json”，函数（json）{
var hits=json.count；
var迭代，tnname，迭代；
for（点击量中的var k）{
var值；
如果（点击hasOwnProperty（k））{
值=点击次数[k]；
var iteratearray=[]；
用于（var j值）{
if（值hasOwnProperty（j））{
J
var检查=值[j]；
用于（检查中的var i）{
如果（勾选hasOwnProperty（i））{
var测试=检查[i]；
for（测试中的var t）{
if（测试hasOwnProperty（t））{
var pagename=JSON.stringify（t）
var arr=[]
如果（pagename.includes（“pagename”））{
//警报（“键为“+pagename+”，值为“+JSON.stringify（test[t]））；
for（var it=0；it

---

任何关于如何实现这一目标的建议都将大有裨益。提前谢谢。

我想问题在于如何将

pagenamearray

分配给

tablelink.innerHTML

。这会将数组转换为字符串，将数组中的所有元素也转换为字符串，并用逗号分隔。但是，您的

pagenamearray

也包含一些空数组；在该过程中，这些字符串将转换为空字符串，但前后仍有逗号

---

在上面的示例代码中，

pagenamearray

的值为

[[]，“T01_-Launch”]，[[]，“T02_-Login”]，[null，[]，“T01_-Launch”]，[null，[]，“T02_-Launch”]

-当转换为字符串时，这将导致

、T01_-Launch、、T02_-Login、、、T01_-Launch、、T02_-Login”

。因此，与直接将其分配给innerHTML值不同，您首先必须过滤掉空数组和空值。

请格式化

json     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);


}