JSON2HTML

Q：返回的JSON包含多个同级对象 每个对象有ID和PARENTID 要求找到每个子级对应的父级 并通过缩进的不同体现出层级结构
A：这个是在翻版zipkin的时候遇到的问题 核心思路是 通过找到没有parentid的节点作为根节点 (后来调API的时候发现有时返回的所有对象都有parentid 此时将parentid===traceid的对象作为根节点) 然后创建一个新的数组用来存放已经加工好的新的JSON (需要引入深度来控制缩进样式 要在原数组中剔除已经匹配到父级的子级和新数组中添加已匹配到父级的子级 因为在循环中可能先出现子级 同时注意回滚) 最后将加工好的对象取出来 做递归 即可画出页面

function json2html() {
    //模拟数据
    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"
    }];

    //理想结果
    // 0
    //      1
    //          2
    //          3
    //      7
    //      5
    //          4
    //      6

    //清空为画页面准备的DIV
    $("#test_div").empty();

    var rootObj = {};
    var newJsonArr = [];
    //找到根节点
    for (var i = 0; i < json4test.length; i++) {
        if (!json4test[i].parentId) {
            //引入深度 控制缩进样式
            json4test[i].deep = 0;
            rootObj = json4test[i];
            //创建新数组根节点
            newJsonArr.push(rootObj);
            //从原数据组中剔除根节点
            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;
                //创建孩子节点
                if (!newJsonArr[i].childArr) {
                    newJsonArr[i].childArr = [];
                }
                //装入孩子节点
                newJsonArr[i].childArr.push(json4test[j]);
                //更新孩子节点到新数组中 避免孩子节点先于父级节点出现于数组中 漏掉同时
                //上一句 配合上一句在下次循环中 同时添加其孩子节点
                newJsonArr.push(json4test[j]);
                //剔除掉该孩子节点
                json4test.splice(j, 1);
                //回滚一次
                j = j - 1;
            }
        }
    }

    //取得处理完成的新对象 数组中其他元素只是为操作数组第一个元素服务
    var newObj = newJsonArr[0];
    //加工新对象 为画页面做准备
    dealNewObj(newObj);

}

/**
 * [dealNewObj 加工新对象]
 * @param  {[type]} newObj [description]
 * @return {[type]}        [description]
 */
function dealNewObj(newObj) {
    //如果有孩子节点 先画出自己 然后递归
    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 = "" + newObj.name + "
";
    $("#test_div").append(panel);
}