美文网首页
js 根据pid创建树结构

js 根据pid创建树结构

作者: clmll | 来源:发表于2019-07-16 21:41 被阅读0次
const list = [
  { id:1,pid:0,value:"莫林莲" },
  { id:2,pid:1,value:"莫林莲1" },
  { id:3,pid:1,value:"莫林莲2" },
  { id:4,pid:1,value:"莫林莲3" },
  { id:5,pid:0,value:"廖天" },
  { id:6,pid:5,value:"廖天1" },
  { id:7,pid:5,value:"廖天2" },
  { id:8,pid:5,value:"廖天3" },
  { id:9,pid:0,value:"彭勇" },
  { id:10,pid:9,value:"彭勇1" },
  { id:11,pid:10,value:"彭勇2" },
  { id:12,pid:11,value:"彭勇3" },
  { id:13,pid:12,value:"彭勇4" },
  { id:14,pid:13,value:"彭勇5" },
  { id:15,pid:14,value:"彭勇6" },
  { id:16,pid:0,value:"陳林" }
];

const data = (()=>{
  let arr = [];
  function toTree(id,array,list){
    let newArr = list.filter(item=> item.pid === id );
    newArr.forEach(item=>{
      let arr = [];
      item.children = toTree(item.id,arr,list);
      array.push(item);
    });
    return array;
  }
  toTree(0,arr,list);
  console.log(arr);
  return arr;
})();

生成的数据

[{
    "id": 1,
    "pid": 0,
    "value": "莫林莲",
    "children": [{
        "id": 2,
        "pid": 1,
        "value": "莫林莲1",
        "children": []
    }, {
        "id": 3,
        "pid": 1,
        "value": "莫林莲2",
        "children": []
    }, {
        "id": 4,
        "pid": 1,
        "value": "莫林莲3",
        "children": []
    }]
}, {
    "id": 5,
    "pid": 0,
    "value": "廖天",
    "children": [{
        "id": 6,
        "pid": 5,
        "value": "廖天1",
        "children": []
    }, {
        "id": 7,
        "pid": 5,
        "value": "廖天2",
        "children": []
    }, {
        "id": 8,
        "pid": 5,
        "value": "廖天3",
        "children": []
    }]
}, {
    "id": 9,
    "pid": 0,
    "value": "彭勇",
    "children": [{
        "id": 10,
        "pid": 9,
        "value": "彭勇1",
        "children": [{
            "id": 11,
            "pid": 10,
            "value": "彭勇2",
            "children": [{
                "id": 12,
                "pid": 11,
                "value": "彭勇3",
                "children": [{
                    "id": 13,
                    "pid": 12,
                    "value": "彭勇4",
                    "children": [{
                        "id": 14,
                        "pid": 13,
                        "value": "彭勇5",
                        "children": [{
                            "id": 15,
                            "pid": 14,
                            "value": "彭勇6",
                            "children": []
                        }]
                    }]
                }]
            }]
        }]
    }]
}, {
    "id": 16,
    "pid": 0,
    "value": "陳林",
    "children": []
}]

js 树结构转 pid 格式
https://www.jianshu.com/p/3efcdf0ac826

相关文章

网友评论

      本文标题:js 根据pid创建树结构

      本文链接:https://www.haomeiwen.com/subject/pzyxlctx.html