Q：返回的JSON包含多個同級對象 每個對象有ID和PARENTID 要求找到每個子級對應(yīng)的父級 并通過縮進(jìn)的不同體現(xiàn)出層級結(jié)構(gòu)
A：這個是在翻版zipkin的時候遇到的問題 核心思路是 通過找到?jīng)]有parentid的節(jié)點作為根節(jié)點 (后來調(diào)API的時候發(fā)現(xiàn)有時返回的所有對象都有parentid 此時將parentid===traceid的對象作為根節(jié)點) 然后創(chuàng)建一個新的數(shù)組用來存放已經(jīng)加工好的新的JSON (需要引入深度來控制縮進(jìn)樣式 要在原數(shù)組中剔除已經(jīng)匹配到父級的子級和新數(shù)組中添加已匹配到父級的子級 因為在循環(huán)中可能先出現(xiàn)子級 同時注意回滾) 最后將加工好的對象取出來 做遞歸 即可畫出頁面

function json2html() {
    //模擬數(shù)據(jù)
    var json4test = [{
        "id": "0",
        "name": "0"
    }, {
        "id": "4",
        "name": "4",
        "parentId": "5"
    }, {
        "id": "1",
        "name": "1",
        "parentId": "0"
    }, {
        "id": "2",
        "name": "2",
        "parentId": "1"
    }, {
        "id": "7",
        "name": "7",
        "parentId": "0"
    }, {
        "id": "3",
        "name": "3",
        "parentId": "1"
    }, {
        "id": "5",
        "name": "5",
        "parentId": "0"
    }, {
        "id": "6",
        "name": "6",
        "parentId": "0"
    }];

    //理想結(jié)果
    // 0
    //      1
    //          2
    //          3
    //      7
    //      5
    //          4
    //      6

    //清空為畫頁面準(zhǔn)備的DIV
    $("#test_div").empty();

    var rootObj = {};
    var newJsonArr = [];
    //找到根節(jié)點
    for (var i = 0; i < json4test.length; i++) {
        if (!json4test[i].parentId) {
            //引入深度 控制縮進(jìn)樣式
            json4test[i].deep = 0;
            rootObj = json4test[i];
            //創(chuàng)建新數(shù)組根節(jié)點
            newJsonArr.push(rootObj);
            //從原數(shù)據(jù)組中剔除根節(jié)點
            json4test.splice(i, 1);
        }
    }

    //為每個孩子匹配到父級
    for (var i = 0; i < newJsonArr.length; i++) {
        for (var j = 0; j < json4test.length; j++) {
            if (json4test[j].parentId == newJsonArr[i].id) {
                //孩子深度為父級深度+1
                json4test[j].deep = newJsonArr[i].deep + 1;
                //創(chuàng)建孩子節(jié)點
                if (!newJsonArr[i].childArr) {
                    newJsonArr[i].childArr = [];
                }
                //裝入孩子節(jié)點
                newJsonArr[i].childArr.push(json4test[j]);
                //更新孩子節(jié)點到新數(shù)組中 避免孩子節(jié)點先于父級節(jié)點出現(xiàn)于數(shù)組中 漏掉同時
                //上一句 配合上一句在下次循環(huán)中 同時添加其孩子節(jié)點
                newJsonArr.push(json4test[j]);
                //剔除掉該孩子節(jié)點
                json4test.splice(j, 1);
                //回滾一次
                j = j - 1;
            }
        }
    }

    //取得處理完成的新對象 數(shù)組中其他元素只是為操作數(shù)組第一個元素服務(wù)
    var newObj = newJsonArr[0];
    //加工新對象 為畫頁面做準(zhǔn)備
    dealNewObj(newObj);

}

/**
 * [dealNewObj 加工新對象]
 * @param  {[type]} newObj [description]
 * @return {[type]}        [description]
 */
function dealNewObj(newObj) {
    //如果有孩子節(jié)點 先畫出自己 然后遞歸
    if (newObj.childArr) {
        drawHtml(newObj);
        for (var i = 0; i < newObj.childArr.length; i++) {
            dealNewObj(newObj.childArr[i]);
        }
    } else {
        drawHtml(newObj);
    }
}

/**
 * [drawHtml 畫出頁面]
 * @param  {[type]} newObj [description]
 * @return {[type]}        [description]
 */
function drawHtml(newObj) {
    var panel = "";
    panel = "<span style='margin-left:" + 10 * newObj.deep + "px;'>" + newObj.name + "</span><br/>";
    $("#test_div").append(panel);
}