for循环遍历多级json数据出现的一些问题

1.后台返回的json数据

[    {        "id": "3",        "text": "第一层",        "line": [            {                "id": "5",                "text": "第一排",                "box": [                    {                        "id": "7",                        "text": "第一盒"                    }, {                        "id": "8",                        "text": "第二盒"                    }                ]            }, {                "id": "6",                "text": "第二排",                "box": [                    {                        "id": "37",                        "text": "第一盒"                    }, {                        "id": "38",                        "text": "第二盒"                    }, {                        "id": "39",                        "text": "第三盒"                    }                ]            }        ]    }, {        "id": "34",        "text": "第二层",        "line": [            {                "id": "40",                "text": "第一排",                "box": [                    {                        "id": "42",                        "text": "第一盒"                    }, {                        "id": "43",                        "text": "第二盒"                    }                ]            }, {                "id": "41",                "text": "第二排"                    }        ]    }, {        "id": "35",        "text": "第三层",        "line": [            {                "id": "44",                "text": "第一排",                "box": [                    {                        "id": "46",                        "text": "第一盒"                    }, {                        "id": "47",                        "text": "第二盒"                    }, {                        "id": "48",                        "text": "第三盒"                    }, {                        "id": "49",                        "text": "第四盒"                    }                ]            }, {                "id": "45",                "text": "第二排",                "box": [                    {                        "id": "50",                        "text": "第一盒"                    }, {                        "id": "51",                        "text": "第二盒"                    }, {                        "id": "52",                        "text": "第三盒"                    }, {                        "id": "53",                        "text": "第四盒"                    }, {                        "id": "54",                        "text": "第五盒"                    }                ]            }        ]    }, {        "id": "36",        "text": "第四层",        "line": [            {                "id": "55",                "text": "第一排",                "box": [                    {                        "id": "56",                        "text": "第一盒"                    }, {                        "id": "57",                        "text": "第二盒"                    }, {                        "id": "58",                        "text": "第三盒"                    }, {                        "id": "59",                        "text": "第四盒"                    }                ]            }, {                "id": "60",                "text": "第二排",                "box": [                    {                        "id": "61",                        "text": "第一盒"                    }, {                        "id": "62",                        "text": "第二盒"                    }, {                        "id": "63",                        "text": "第三盒"                    }                ]            }        ]    }]

2.遍历方法

        success: function(data) {                                    var layar = JSON.parse(data.d);//针对于webservice返回的数据                                    $('.accordion ul li').remove();                                    for(var i = 0; i < layar.length; i++) {                                        var line = layar[i].line;                                        for(var j = 0; j < line.length; j++) {                                            var box = line[j].box;                                            var a = "<li id = " + line[j].id + " ></li> ";                                            $('.accordion ul').eq(i).append(a);                                            if(box != undefined) {                                                for(var k = 0; k < box.length; k++) {                                                    var b = "<div id=" + box[k].id + ">" + box[k].text + "</div>";                                                    $('.accordion ul').eq(i).find("li").eq(j).append(b);                                                }                                            }                                        }                                    }                                }

3.调试遇到的问题

（1）返回的json数据若是没有下一层数据，如图所示：

其中的第二层第二排里面是没有box对象的，但是第二排也定义了id，与text。当我们采用遍历方式时，循环到这个地方会出问题，因为它找不到第二排里面的box对象。

解决办法-one

if(box != undefined) {            for(var k = 0; k < box.length; k++) {           var b = "<div id=" + box[k].id + ">" + box[k].text + "</div>";                                                }                    }

判断一下再循环

解决办法-two

{                "id": "41",                "text": "第二排",                "box":[]                    }

将后台返回的数据转换为这样的格式，即使box对象里面为空，也要返回含有box参数的json数据

(2)显示排列时

 $('.accordion ul').eq(i).find("li").eq(j).append(b);

这句代码不等同

$('.accordion ul li').eq(j).append(b);

当时犯了一个很大的错误，耽误了很久，感谢我的”盆友 “帮我解答了这个问题。

4.最终效果