ajax获取json数据为三维数组时，前台js嵌套循环解析

   最近有些时间，整理一下之前在开发时遇到的问题，也算是对自己成果的记录吧。

    当前端获取的json数据为二维时，解析生成的数据列表相对比较简单，直接做一个二维数组的循环就可以直接生成列表，相关的代码以及展示截图如下：

for (var i=0; i<json.length; i++) {

tempHtml += '<div class="col-xs-12">'

+'<label class="checkbox-inline" style="padding-left:0px">';

tempHtml += '<input type="checkbox" name="checkbox#" checked="checked" value="'+json[i].name+'" showname="'+json[i].showname+'" cnt="'+json[i].count+'" onchange="changeZdyAsOptionData(#)"> '+json[i].showname+'(' + json[i].count;

tempHtml += ') </label></div>';

}

 

    当前端获取的json数据为三维时，需要先计算最后一列每一个分支所占的行数，然后分别合并各自分支的行数计算出第二列的行数，最后通过合并第二列每列的行数计算出第一列的行数,具体代码以及截图如下：

var temphtml = '<table class="table table-striped"><tr><td rowspan="1" width="40%">'+$("#fxcol1").find("option:selected").text()+'</td>';

if (temp.length == 2) {

temphtml += '<td rowspan="1" width="60%">'+$("#fxcol2").find("option:selected").text()+'</td></tr>';



//计算出第二列的行数

for (var i=0; i<json.length; i++) {

var tdcol = 0;

var flag = 0;

if (json[i].count > 0) {

if (json[i].children && json[i].children.length>0) {

for (var j=0; j<json[i].children.length; j++) {

if (json[i].children[j].count > 0) {

tdcol = tdcol + 1;

flag++;

}

}

if(flag == 0){

tdcol = 1;

}

}

}



//生成表格

if(tdcol > 0){

if(tdcol == 1){

temphtml += '<tr><td rowspan="1" width="40%;"><div>' + json[i].labelName + '(<a onclick="threeAsDataview(1,\''+json[i].labelName+'\')">' + json[i].count + '</a>)</div></td>';

if (json[i].children && json[i].children.length>0) {

for (var j=0; j<json[i].children.length; j++) {

if (json[i].children[j].count > 0) {

temphtml += '<td rowspan="1" width="60%"><div>' + json[i].children[j].labelName + '(<a onclick="threeAsDataview(2,\''+json[i].labelName+'##'+json[i].children[j].labelName+'\')">' + json[i].children[j].count + '</a>)</div></td></tr>';

}

}

}

} else{

temphtml += '<tr><td rowspan='+ tdcol +' width="40%;"><div>' + json[i].labelName + '(<a onclick="threeAsDataview(1,\''+json[i].labelName+'\')">' + json[i].count + '</a>)</div></td>';

var flag_two = 0;

for (var j=0; j<json[i].children.length; j++) {

if (json[i].children[j].count > 0) {

flag_two++;

if(flag_two == 1){

temphtml += '<td rowspan="1" width="60%"><div>' + json[i].children[j].labelName + '(<a onclick="threeAsDataview(2,\''+json[i].labelName+'##'+json[i].children[j].labelName+'\')">' + json[i].children[j].count + '</a>)</div></td></tr>';

} else{

temphtml += '<tr><td rowspan="1" width="60%"><div>' + json[i].children[j].labelName + '(<a onclick="threeAsDataview(2,\''+json[i].labelName+'##'+json[i].children[j].labelName+'\')">' + json[i].children[j].count + '</a>)</div></td></tr>';

}



}

}

}

}

}

temphtml += '</table>';



$("#chartdata").html(temphtml);

} else if (temp.length == 3) {

temphtml += '<td rowspan="1" width="30%">'+$("#fxcol2").find("option:selected").text()+'</td><td rowspan="1" width="30%">'+$("#fxcol3").find("option:selected").text()+'</td></tr>';



//计算出最后一列的行数

for (var i=0; i<json.length; i++) {

var tdcol = 0;

var flag_three_num = 0;

if (json[i].count > 0) {

if (json[i].children && json[i].children.length>0) {

tdcol = 1;

for (var j=0; j<json[i].children.length; j++) {

var flag_three = 0;

if (json[i].children[j].count > 0) {

if (json[i].children[j].children && json[i].children[j].children.length>0) {

for (var k=0; k<json[i].children[j].children.length; k++) {

if (json[i].children[j].children[k].count > 0) {

tdcol = tdcol + 1;

flag_three++;

}

  }

if(flag_three == 0){

flag_three_num++;

tdcol = tdcol + 1;

}

}

}

}

if(flag_three_num > 0){

tdcol = tdcol - 1;

}

} else{

tdcol = 1;

}

}

if(tdcol > 1 && flag_three_num == 0){

tdcol = tdcol -1;

}



//生成表格

if(tdcol > 0){

if(tdcol == 1){

temphtml += '<tr><td rowspan="1" width="40%;"><div>' + json[i].labelName + '(<a onclick="threeAsDataview(1,\''+json[i].labelName+'\')">' + json[i].count + '</a>)</div></td>';

var mark = 0;

if (json[i].children && json[i].children.length>0) {

for (var j=0; j<json[i].children.length; j++) {

if (json[i].children[j].count > 0) {

temphtml += '<td rowspan="1" width="30%"><div>' + json[i].children[j].labelName + '(<a onclick="threeAsDataview(2,\''+json[i].labelName+'##'+json[i].children[j].labelName+'\')">' + json[i].children[j].count + '</a>)</div></td><td rowspan="1" width="30%">';

mark = 1;

if (json[i].children[j].children && json[i].children[j].children.length>0) {

for (var k=0; k<json[i].children[j].children.length; k++) {

if (json[i].children[j].children[k].count > 0) {

temphtml += '<div>' + json[i].children[j].children[k].labelName + '(<a onclick="threeAsDataview(3,\''+json[i].labelName+'##'+json[i].children[j].labelName+'##'+json[i].children[j].children[k].labelName+'\')">' + json[i].children[j].children[k].count + '</a>)</div></td>' ;

}

}

}

temphtml += '</td>';

}

}

}

if(mark == 0){

temphtml += '<td rowspan="1" width="30%"><div></div></td><td rowspan="1" width="30%"><div></div></td>';

}

temphtml += '</tr>';

} else{

temphtml += '<tr><td rowspan='+ tdcol +' width="40%;"><div>' + json[i].labelName + '(<a onclick="threeAsDataview(1,\''+json[i].labelName+'\')">' + json[i].count + '</a>)</div></td>';

for (var j=0; j<json[i].children.length; j++) {

var SecondCol = 0;

var flag_second = 0;

var flag_three = 0;

if (json[i].children[j].count > 0) {

if (json[i].children[j].children && json[i].children[j].children.length>0) {

for (var k=0; k<json[i].children[j].children.length; k++) {

if (json[i].children[j].children[k].count > 0) {

SecondCol = SecondCol + 1;

flag_second++;

}

}

if(flag_second == 0){

SecondCol = SecondCol + 1

}

} else{

SecondCol = 1;

}

}

//计算出第二列的行数

if(SecondCol > 0){

var temp_mark = 0;

if (json[i].children[j].count > 0) {

if(temp_mark == 0){

temphtml += '<td rowspan='+ SecondCol +' width="30%"><div>' + json[i].children[j].labelName + '(<a onclick="threeAsDataview(2,\''+json[i].labelName+'##'+json[i].children[j].labelName+'\')">' + json[i].children[j].count + '</a>)</div></td>';

temp_mark++;

} else{

temphtml += '<tr><td rowspan='+ SecondCol +' width="30%"><div>' + json[i].children[j].labelName + '(<a onclick="threeAsDataview(2,\''+json[i].labelName+'##'+json[i].children[j].labelName+'\')">' + json[i].children[j].count + '</a>)</div></td></tr>';

}

if (json[i].children[j].children && json[i].children[j].children.length>0) {

for (var k=0; k<json[i].children[j].children.length; k++) {

if (json[i].children[j].children[k].count > 0) {

if(k == 0){

temphtml += '<td rowspan="1" width="30%"><div>' + json[i].children[j].children[k].labelName + '(<a onclick="threeAsDataview(3,\''+json[i].labelName+'##'+json[i].children[j].labelName+'##'+json[i].children[j].children[k].labelName+'\')">' + json[i].children[j].children[k].count + '</a>)</div></td></tr>' ;

} else{

temphtml += '<tr><td rowspan="1" width="30%"><div>' + json[i].children[j].children[k].labelName + '(<a onclick="threeAsDataview(3,\''+json[i].labelName+'##'+json[i].children[j].labelName+'##'+json[i].children[j].children[k].labelName+'\')">' + json[i].children[j].children[k].count + '</a>)</div></td></tr>' ;

}

flag_three = 1;

}

}

if(flag_three == 0){

temphtml += '<td rowspan="1" width="30%"><div></div></td></tr>';

}

}

}

}

}

}

}

}

json数据格式如下：

[
    {
        "labelName":"2004",
        "count":3,
        "children":[
            {
                "count":2,
                "labelName":200401,
                "children":[
                   {
                      "labelName":"H",
                      "count":2,
                      "children":null
                   },
                   {
                      "labelName":"G",
                      "count":0,
                      "children":null
                   },
                ]
            },
           {
                "count":1,
                "labelName":200405,
                "children":[
                   {
                      "labelName":"C",
                      "count":1,
                      "children":null
                   },
                   {
                      "labelName":"G",
                      "count":0,
                      "children":null
                   },
                ]
            }
        ]
    }
]