json对象数组转换成父子树对象

json对象转树形结构
转换前

[{"name":"java学院","pid":0,"id":1,"value":"10001"},
{"name":"前端系","pid":1,"id":2,"value":"1000101"},
{"name":"后端系","pid":1,"id":3,"value":"1000102"},
{"name":"硬件系","pid":1,"id":4,"value":"1000103"},
{"name":"架构系","pid":1,"id":5,"value":"1000104"},
{"name":"vue","pid":2,"id":6,"value":"100010101"},
{"name":"HTML","pid":2,"id":7,"value":"100010102"},
{"name":"css","pid":2,"id":8,"value":"100010103"},
{"name":"jquery","pid":2,"id":9,"value":"100010104"},
{"name":"react","pid":2,"id":10,"value":"100010105"},
{"name":"java","pid":3,"id":11,"value":"100010201"},
{"name":"javascript","pid":2,"id":12,"value":"100010106"},
{"name":"python","pid":3,"id":13,"value":"100010202"},
{"name":"c#","pid":3,"id":14,"value":"100010203"},
{"name":"springboot","pid":3,"id":15,"value":"100010204"},
{"name":"c++","pid":3,"id":16,"value":"100010205"},
{"name":"mybatis","pid":5,"id":17,"value":"100010401"}]

转换后

[{"name":"java学院","pid":0,"id":1,"value":"10001",
  "children":[
            {"name":"前端系","pid":1,"id":2,"value":"1000101",
             "children":[
                        {"name":"vue","pid":2,"id":6,"value":"100010101"}, 
                        {"name":"HTML","pid":2,"id":7,"value":"100010102"},
                        {"name":"css","pid":2,"id":8,"value":"100010103"},
                        {"name":"jquery","pid":2,"id":9,"value":"100010104"},
                        {"name":"react","pid":2,"id":10,"value":"100010105"},
                        {"name":"javascript","pid":2,"id":12,"value":"100010106"}
              ]},
            {"name":"后端系","pid":1,"id":3,"value":"1000102",
             "children":[
                        {"name":"java","pid":3,"id":11,"value":"100010201"},
                        {"name":"python","pid":3,"id":13,"value":"100010202"},
                        {"name":"c#","pid":3,"id":14,"value":"100010203"},
                        {"name":"springboot","pid":3,"id":15,"value":"100010204"},
                        {"name":"c++","pid":3,"id":16,"value":"100010205"}
              ]},
            {"name":"硬件系","pid":1,"id":4,"value":"1000103"},
            {"name":"架构系","pid":1,"id":5,"value":"1000104",
             "children":[
                        {"name":"mybatis","pid":5,"id":17,"value":"100010401"}]}
              ]}
]

转换方法

function invertTree (sourceArr){
  //筛选parents为0为根节点
  const result = sourceArr.filter(item => item.pid === "0")
  function insertChildren(levelArr){
    let nextLevelObj = null
    for(let i = 0;i < levelArr.length;i++){
      //初始化children属性
      levelArr[i].children = levelArr[i].children || []
      
      //闭包？访问外层的sourceArr
      for(let j = 0;j < sourceArr.length;j++){
        if(sourceArr[j].pid === levelArr[i].id){
          levelArr[i].children.push(sourceArr[j])
          //收集下一层级都有哪儿些节点，使用对象防止重复收集
          nextLevelObj = nextLevelObj || {}
          nextLevelObj[sourceArr[j].id] = sourceArr[j]
        }
      }
    }
    //对象转为数组 递归
    if(nextLevelObj){
      const nextLevelArr = []
      for(let id in nextLevelObj){
        nextLevelArr.push(nextLevelObj[id])
      }
      insertChildren(nextLevelArr)
    }
  }
  insertChildren(result)
  return result
}

使用方法

let arr = [] //原始结构的json对象
let treeData = invertTree(arr);//转换后的树结构对象