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);
当时犯了一个很大的错误,耽误了很久,感谢我的”盆友 “帮我解答了这个问题。