怎么把这个数据对象做成层级的

Question

const tableData = [
  {
    id: 1, // id
    parentId: 0, // 上级id
    name: "智水小荷总部",
    parentName: null // 上级名字
  },
  {
    id: 2,
    parentId: 1,
    name: "长沙分公司",
    parentName: "智水小荷总部"
  },
  {
    id: 3,
    parentId: 2,
    name: "上海分公司",
    parentName: "智水小荷总部"
  },
  {
    id: 4,
    parentId: 3,
    name: "上海分公司",
    parentName: "智水小荷总部"
  },
  {
    id: 5,
    parentId: 4,
    name: "上海分公司",
    parentName: "智水小荷总部"
  },
  {
    id: 6,
    parentId: 0,
    name: "上海分公司",
    parentName: "智水小荷总部"
  },
  {
    id: 7,
    parentId: 6,
    name: "上海分公司",
    parentName: "智水小荷总部"
  }
]

怎么把这个数据做成

[
{id: 1,parentId:0,children:[{id:2,parentId: 1,chlidren: [...]}]}
]

Answer 1

for (var i= tableData.length-2; i>=1; i--){
    tableData[i-1].children = tableData[i];
}
console.log(tableData[0]);

还没想到更好的

评论中有人给出如下答案：

for (var i= tableData.length-1; i>0; i--){
    tableData[i-1].children = [tableData.pop()];
}
console.log(tableData);

Answer 2

说一下思路吧。

设置两个变量，obj={}，arr=[]。

深拷贝一份tableData的数据，这里叫做newTableData。

循环遍历newTableData，将newTableData中的一个个对象增加children属性，然后赋值到obj中，以对象的id为key，以对象为value，类似如下：

obj = {
    1: {
        id: 1,
        parentId: 0,
        name: "智水小荷总部",
        children: []
    },
    2: {
        id: 2,
        parentId: 1,
        name: "长沙分公司",
        children: []
    }
}

再次遍历newTableData，如果newTableData[i].parentId === 0，就认为是一级节点，添加到arr中：

arr.push(newTableData[i])

如果 newTableData[i].parentId !== 0，并且obj[newTableData[i].parentId]存在的话：

obj[newTableData[i].parentId].children.push(newTableData[i])

因为对象是引用类型，所以arr和obj中的数据，其实是一份！在obj上做修改，arr上也会同步存在。

说白了，就是将newTableData中所有的数据以数组和对象的形式保存，对象其实是一个层级被打平了的数组。

Answer 3

let handleTableData = data => {
  // 排序，方便知道哪个在第一层
  let sortData = data.sort((a, b) => {
    return a.parentId - b.parentId
  })

  // 第一层的id
  let topParentId = sortData[0].parentId

  // 递归
  let loop = (arr, obj) => {
    arr.map((v, i) => {
      if (v.id === obj.parentId) {
        v.children.push(obj)
      } else {
        if (v.children.length) {
          loop(v.children, obj)
        }
      }
    })
  }

  return sortData.reduce((resArr, obj) => {
    obj.children = []
    if (obj.parentId === topParentId) { // 第一层
      resArr.push(obj)
    } else {
      loop(resArr, obj)
    }
    return resArr
  }, [])
}

const tableData = [
  {
    id: 1, // id
    parentId: 0, // 上级id
    name: "智水小荷总部",
    parentName: null // 上级名字
  },
  {
    id: 2,
    parentId: 1,
    name: "长沙分公司",
    parentName: "智水小荷总部"
  },
  {
    id: 3,
    parentId: 2,
    name: "上海分公司",
    parentName: "智水小荷总部"
  },
  {
    id: 4,
    parentId: 3,
    name: "上海分公司",
    parentName: "智水小荷总部"
  },
  {
    id: 5,
    parentId: 4,
    name: "上海分公司",
    parentName: "智水小荷总部"
  },
  {
    id: 6,
    parentId: 0,
    name: "上海分公司",
    parentName: "智水小荷总部"
  },
  {
    id: 7,
    parentId: 6,
    name: "上海分公司",
    parentName: "智水小荷总部"
  }
]

let res = handleTableData(tableData)

console.log(res)