id pid数据转为树形数据结构

1,738 阅读1分钟

树形数据在数据库中一般是使用idpid来记录:

 {
     id: 1,
     pid: 0,
     name: '公司'
 }

这种数据怎么转成前端所需的树形的数据结构呢?

代码如下:

var flatLs = [
  {id: 1, pid: 0},
  {id: 2, pid: 0},
  {id: 3, pid: 0},
  {id: 4, pid: 1},
  {id: 5, pid: 1},
  {id: 6, pid: 2},
  {id: 7, pid: 3},
  {id: 8, pid: 3},
  {id: 9, pid: 4},
  {id: 10, pid: 1}
]
var flat2tree = flatLs => {
  flatLs.forEach(item => {
    if (item.pid === 0) {
      tree.push(item)
    } else {
      var index = flatLs.findIndex(item1 => item1.id === item.pid)
      if (index !== -1) {
        flatLs[index].children = flatLs[index].children || []
        flatLs[index].children.push(item)
      }
    }
  })
  return flatLs.filter(item => item.pid === 0)
}

flat2tree(flatLs)

这里主要利用了对象是通过引用传值的特点来处理的。因此遍历整个数组,直接修改传入的参数,最后取出所有的顶层节点的数据即可。数据中假定所有的顶级节点的pid都是0