如何合并三个Ajax获取的员工数组生成树形结构数据？

核心思路 #

先通过对象映射快速定位每个节点，再根据层级关联关系（假设子节点有ParentID字段指向父节点，孙节点同理），把下级节点挂载到对应上级的children属性中。

代码实现 #

假设你的员工数据结构包含EmployeeID和对应ParentID（用来关联上级节点），直接用以下逻辑处理：

// 模拟Ajax获取的三个数组
const parentArr = [{ EmployeeID: 2, Name: "父节点", ParentID: null }];
const childArr = [
  { EmployeeID: 8, Name: "子节点1", ParentID: 2 },
  { EmployeeID: 1, Name: "子节点2", ParentID: 2 },
  { EmployeeID: 3, Name: "子节点3", ParentID: 2 },
  { EmployeeID: 4, Name: "子节点4", ParentID: 2 },
  { EmployeeID: 5, Name: "子节点5", ParentID: 2 }
];
const grandChildArr = [
  { EmployeeID: 6, Name: "孙节点1", ParentID: 8 },
  { EmployeeID: 7, Name: "孙节点2", ParentID: 1 },
  { EmployeeID: 9, Name: "孙节点3", ParentID: 3 }
];

// 1. 把所有节点存入映射表，用EmployeeID做键，同时初始化children空数组
const nodeMap = {};
[...parentArr, ...childArr, ...grandChildArr].forEach(node => {
  nodeMap[node.EmployeeID] = { ...node, children: [] };
});

// 2. 将子节点挂载到对应父节点的children中
childArr.forEach(child => {
  const parentNode = nodeMap[child.ParentID];
  if (parentNode) parentNode.children.push(nodeMap[child.EmployeeID]);
});

// 3. 将孙节点挂载到对应子节点的children中
grandChildArr.forEach(grandChild => {
  const parentNode = nodeMap[grandChild.ParentID];
  if (parentNode) parentNode.children.push(nodeMap[grandChild.EmployeeID]);
});

// 4. 最终的树形结构根节点集合（这里只有一个父节点）
const treeData = parentArr.map(item => nodeMap[item.EmployeeID]);
console.log(treeData);

关键说明 #

• 如果你的数据没有ParentID字段，需要先明确子节点归属父节点、孙节点归属子节点的关联规则，替换代码里的关联判断逻辑即可。
• 这种方式时间复杂度为O(n)，不管层级多少，都能高效完成节点挂载。

内容的提问来源于stack exchange，提问作者Tan