前端组装树形结构数据

157 阅读1分钟

组装只有一个顶级的树结构

var aTree = [
       { "id": "1", "name": "动物", "pid": "0"},
       { "id": "2", "name": "鸟类", "pid": "3"},
       { "id": "3", "name": "无脊椎动物", "pid": "4"},
       { "id": "4", "name": "哺乳动物", "pid": "1"}
   ];
   let obj = {}
   aTree.forEach(item => {
       if (item.pid === '0') {obj = item}
       item.childArr = aTree.filter(items => items.pid === item.id)
   })
   console.log(obj)

打印结果

{
       "id": "1", "name": "动物", "pid": "0", childArr: [
           {
               "id": "4", "name": "哺乳动物", "pid": "1", childArr: [
                   {
                       "id": "3", "name": "无脊椎动物", "pid": "4", childArr: [
                           { "id": "2", "name": "鸟类", "pid": "3", childArr: [] },
                       ]
                   },
               ]
           }
       ]
   }

组装多级的树结构

 var aTree = [
        { "id": "1", "name": "动物", "pid": "0" },
        { "id": "2", "name": "鸟类", "pid": "0" },
        { "id": "3", "name": "无脊椎动物", "pid": "4" },
        { "id": "4", "name": "哺乳动物", "pid": "1" },
        { "id": "5", "name": "啮齿动物", "pid": "1" },
        
    ];
    let arr = []
    aTree.forEach(item => {
        if (item.pid === '0') { arr.push(item) }
        item.childArr = aTree.filter(items => items.pid === item.id)
    })
    console.log(arr)