js一层数据拆成多级分层

如图数据结构
image.png
后台返回的数据如下:

{

"result":[
    {
        "id":101,
        "name":"助安科技",
        "orgType":0
    },
    {
        "id":10101,
        "name":"生产管理部",
        "orgType":1,
        "parentId":101
    },
    {
        "id":10102,
        "name":"设备管理部",
        "orgType":1,
        "parentId":101
    },
    {
        "id":1010201,
        "name":"项目1组",
        "orgType":2,
        "parentId":10102
    },
    {
        "id":1010202,
        "name":"软件研发部",
        "orgType":2,
        "parentId":10102
    },
    {
        "id":102,
        "name":"景安网络",
        "orgType":0,
        "parentId":0
    },
    {
        "id":10201,
        "name":"软件研发部",
        "orgType":1,
        "parentId":102
    }
]

}

也就是本来是分层级的结构后台在一层返给我了,我怎么用最简单的方法把一层的结构变成有多层关系的结构(返回如上图所示的结构)。用JS实现。

阅读 2.5k
1 个回答

image.png

let result = [
    {
        "id":101,
        "name":"助安科技",
        "orgType":0
    },
    {
        "id":10101,
        "name":"生产管理部",
        "orgType":1,
        "parentId":101
    },
    {
        "id":10102,
        "name":"设备管理部",
        "orgType":1,
        "parentId":101
    },
    {
        "id":1010201,
        "name":"项目1组",
        "orgType":2,
        "parentId":10102
    },
    {
        "id":1010202,
        "name":"软件研发部",
        "orgType":2,
        "parentId":10102
    },
    {
        "id":102,
        "name":"景安网络",
        "orgType":0,
        "parentId":0
    },
    {
        "id":10201,
        "name":"软件研发部",
        "orgType":1,
        "parentId":102
    }
]
var i = 0;
let arrToArray = (list=[],id)=>list.reduce((acc,cur,idx,arr)=>(cur.parentId == id && (delete arr[idx]) && acc.push(Object.assign(cur,{children: arrToArray(arr,cur.id)})), acc),[])
arrToArray(result);

image.png


let result = [
    {
        "id":101,
        "name":"助安科技",
        "orgType":0
    },
    {
        "id":10101,
        "name":"生产管理部",
        "orgType":1,
        "parentId":101
    },
    {
        "id":10102,
        "name":"设备管理部",
        "orgType":1,
        "parentId":101
    },
    {
        "id":1010201,
        "name":"项目1组",
        "orgType":2,
        "parentId":10102
    },
    {
        "id":1010202,
        "name":"软件研发部",
        "orgType":2,
        "parentId":10102
    },
    {
        "id":102,
        "name":"景安网络",
        "orgType":0,
        "parentId":0
    },
    {
        "id":10201,
        "name":"软件研发部",
        "orgType":1,
        "parentId":102
    }
]

let arrToArray = (list=[],id)=>list.filter(item=>item.parentId == id).map(item=>Object.assign(item,{children: arrToArray(list,item.id)}))
arrToArray(result);

image.png
这个方法性能最好,只需遍历两次
https://wintc.top/article/8

let result = [
    {
        "id":101,
        "name":"助安科技",
        "orgType":0
    },
    {
        "id":10101,
        "name":"生产管理部",
        "orgType":1,
        "parentId":101
    },
    {
        "id":10102,
        "name":"设备管理部",
        "orgType":1,
        "parentId":101
    },
    {
        "id":1010201,
        "name":"项目1组",
        "orgType":2,
        "parentId":10102
    },
    {
        "id":1010202,
        "name":"软件研发部",
        "orgType":2,
        "parentId":10102
    },
    {
        "id":102,
        "name":"景安网络",
        "orgType":0,
        "parentId":0
    },
    {
        "id":10201,
        "name":"软件研发部",
        "orgType":1,
        "parentId":102
    }
]
function listToTree(srcList) {
  let result = []
  // reduce收集所有节点信息存放在对象中,可以用forEach改写,不过代码会多几行
  let nodeInfo = srcList.reduce((data, node) => (data[node.id] = node, data), {})

 // forEach给所有元素找妈妈
  srcList.forEach(node => {
    if (!node.parentId) {
      result.push(node)
      return
    }
    let parent = nodeInfo[node.parentId]
    if(parent) {
      parent.children = parent.children || []
      parent.children.push(node)
    }
  })
  return result
}
listToTree(result);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题