如何将API返回数据转换为Ant Design树形表格所需格式？

需求说明 #

将API获取的人员数据转换为Ant Design树形表格所需格式：

• 每个父节点对应一个projectId，显示项目ID
• 父节点的子节点为该项目下的所有人员信息
• 若人员属于多个项目，需在对应项目节点下重复展示该人员信息

API返回的原始数据 #

{
  "data": [
    {
      "email": "alyssayo@xxx.com",
      "permissionIds": null,
      "roleIds": ["raa","baa","caa"],
      "projectIds": ["1aa","3aa"]
    },
    {
      "email": "chiuewww@xxx.com",
      "permissionIds": null,
      "roleIds": ["baa","caa"],
      "projectIds": ["1aa","2aa","3aa"]
    },
    {
      "email": "lalaqq@xxx.com",
      "permissionIds": null,
      "roleIds": ["caa"],
      "projectIds": ["1aa"]
    }
  ],
  "statusCode": 200,
  "succeeded": true,
  "code": "",
  "message": "",
  "additionalInfo": null
}

目标数据格式 #

const data = [
  {
    projectIds: "1aa",
    children: [
      {
        email: "alyssayo@xxx.com",
        permissionIds: null,
        roleIds: ["raa","baa","caa"],
        projectIds: "1aa",
      },
      {
        email: "chiuewww@xxx.com",
        permissionIds: null,
        roleIds: ["baa","caa"],
        projectIds: "1aa",
      },
      {
        email: "lalaqq@xxx.com",
        permissionIds: null,
        roleIds: ["caa"],
        projectIds: "1aa",
      }
    ]
  },
  {
    projectIds: "2aa",
    children: [
      {
        email: "chiuewww@xxx.com",
        permissionIds: null,
        roleIds: ["baa","caa"],
        projectIds: "2aa",
      }
    ]
  },
  {
    projectIds: "3aa",
    children: [
      {
        email: "alyssayo@xxx.com",
        permissionIds: null,
        roleIds: ["raa","baa","caa"],
        projectIds: "3aa",
      },    
      {
        email: "chiuewww@xxx.com",
        permissionIds: null,
        roleIds: ["baa","caa"],
        projectIds: "3aa",
      }
    ]
  }
];

转换实现代码 #

function transformToTreeData(apiResponse) {
  // 创建Map存储每个项目对应的人员列表
  const projectMap = new Map();
  
  // 遍历每个人员数据
  apiResponse.data.forEach(person => {
    // 遍历该人员所属的每个项目ID
    person.projectIds.forEach(projectId => {
      // 复制人员对象，将projectIds改为当前单个项目ID
      const personCopy = { ...person, projectIds: projectId };
      
      // 如果Map中已有该项目，添加人员到列表；否则创建新条目
      if (projectMap.has(projectId)) {
        projectMap.get(projectId).push(personCopy);
      } else {
        projectMap.set(projectId, [personCopy]);
      }
    });
  });
  
  // 将Map转换为树形表格所需的数组格式
  return Array.from(projectMap.entries()).map(([projectId, children]) => ({
    projectIds: projectId,
    children
  }));
}

// 使用示例
const apiData = { /* 填入API返回的原始数据 */ };
const treeTableData = transformToTreeData(apiData);

树形表格展示效果 #

• 展开前：显示所有项目ID节点，每个节点仅展示项目ID
• 展开后：点击项目节点，展开显示该项目下的所有人员详细信息

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