js 根据id,pid平面数据build Children树结构

数据库查出来的平面数据如下:

    var nodes = [
    {"id":1,"title":"第一级1","parentid":0},
    {"id":2,"title":"第一级2","parentid":0},
    {"id":3,"title":"第二级1-3","parentid":2},
    {"id":4,"title":"第二级2-4","parentid":2},
    {"id":5,"title":"第三级1-5","parentid":4},
    {"id":6,"title":"第一级3","parentid":0},
    {"id":7,"title":"第二级1-7","parentid":1},
    {"id":8,"title":"第三级1-8","parentid":7}
    ];

理论上要显示出来的效果:


        第一级1
         --第二级1-7
           --第三级1-8
        第一级2
         --第二级1-3
         --第二级2-4
           --第三级1-5
        第一级3

js转换函数

function buildDataToTree(data, pid) {
    const result = [];
    let temp = [];
    for (let i = 0; i < data.length; i++) {
        if (data[i].parentid === pid) {
            const obj = { 'id': data[i].id, 'title': data[i].title, 'parentid': data[i].parentid,'children': [] };
            temp = this.buildDataToTree(data, data[i].id);
            if (temp.length > 0) {
                obj.children = temp;
            }
            result.push(obj);
        }
    }
    return result;
    console.log("--> " + JSON.stringify(result));
}

调用:

//调用
const treeData = buildDataToTree(nodes, 0);
console.log("--> " + JSON.stringify(treeData));

转换后的效果:

[{
    "id": 1,
    "title": "第一级1",
    "parentid": 0,
    "children": [{
        "id": 7,
        "title": "第二级1-7",
        "parentid": 1,
        "children": [{
            "id": 8,
            "title": "第三级1-8",
            "parentid": 7,
            "children": []
        }]
    }]
}, {
    "id": 2,
    "title": "第一级2",
    "parentid": 0,
    "children": [{
        "id": 3,
        "title": "第二级1-3",
        "parentid": 2,
        "children": []
    }, {
        "id": 4,
        "title": "第二级2-4",
        "parentid": 2,
        "children": [{
            "id": 5,
            "title": "第三级1-5",
            "parentid": 4,
            "children": []
        }]
    }]
}, {
    "id": 6,
    "title": "第一级3",
    "parentid": 0,
    "children": []
}]

作者原创文章,转载请注明出处,好用记得点赞关注不迷路

posted @ 2022-10-04 00:14  IT情深  阅读(180)  评论(0编辑  收藏  举报