在 ant 设计中操作 json 数据以适应树数据表-解网

问：

我需要将我的 API 调用数据操作为某种格式以显示在蚂蚁设计表（树数据）中。https://ant.design/components/table/#components-table-demo-tree-data

但是，我花了几个小时，但仍然无法弄清楚如何操作来自 API 的数据以以所需的格式显示。下面是一个示例，如果我根据 projectId 对信息进行分组。

每个树将显示 projectId，然后树中的信息（子树）将显示该项目中人员的所有信息。如果一个人在多个项目中，那么信息将存在于她所在的所有项目中。

谁能帮我解决这个问题。如何操作数据来实现此目的？

从需要操作的 API 调用中获取的对象：

{
  "data": [
    {
      "email": "[email protected]",
      "permissionIds": null,
      "roleIds": ["raa","baa","caa"],
      "projectIds": ["1aa","3aa"]
    },
    {
      "email": "[email protected]",
      "permissionIds": null,
      "roleIds": ["baa","caa"],
      "projectIds": ["1aa","2aa","3aa"]
    },
    {
      "email": "[email protected]",
      "permissionIds": null,
      "roleIds": ["caa"],
      "projectIds": ["1aa"]
    }
  ],
  "statusCode": 200,
  "succeeded": true,
  "code": "",
  "message": "",
  "additionalInfo": null
}

操作后，数据应如下所示：

const data = [
  {
    projectIds: "1aa",
    children: [
      {
        email: "[email protected]",
        permissionIds: null,
        roleIds: ["raa","baa","caa"],
        projectIds: "1aa",
      },
      {
        email: "[email protected]",
        permissionIds: null,
        roleIds: ["baa","caa"],
        projectIds: "1aa",
      },
      {
        email: "[email protected]",
        permissionIds: null,
        roleIds: ["caa"],
        projectIds: "1aa",
      }
    ]
  },
  {
    projectIds: "2aa",
    children: [
      {
        email: "[email protected]",
        permissionIds: null,
        roleIds: ["baa","caa"],
        projectIds: "2aa",
      }
    ]
  },
  {
    projectIds: "3aa",
    children: [
      {
        email: "[email protected]",
        permissionIds: null,
        roleIds: ["raa","baa","caa"],
        projectIds: "3aa",
      },    
      {
        email: "[email protected]",
        permissionIds: null,
        roleIds: ["baa","caa"],
        projectIds: "3aa",
      }
    ]
  }
];

表格的外观（另一个具有不同属性和结构的示例）：

树表工作原理示例的代码：

https://codesandbox.io/s/antd-tree-table-forked-qc995o?file=/index.js

JavaScript ReactJS、 JSON 和 ANTD 数据操作

const projectIdToChildrenDict = apiData.reduce((dict, item) => {
    item.projectIds.forEach(projectId => {
        if (dict[projectId] === undefined) {
            // instantiate empty array if the project id key is not found
            dict[projectId] = [];
        }
        dict[projectId].push(item);
    });

    return dict;
}, {})

const data = Object.keys(projectIdToChildrenDict).map(key => {
    return {
        projectIds: key,
        children: projectIdToChildrenDict[key]
    }
})

这不是一个完整的解决方案，但它应该能让你达到 90% 的目标。

第一部分是使用 Array#reduce 来构建一个对象。此对象类似于字典（因此得名），您可以在其中查找 projectId 并查看包含该项目 ID 的所有元素。projectIdToChildrenDict

然后，当我们初始化时，我们使用 Array#map 遍历先前构建的字典的键（项目 ID），并返回预期输出的新对象。data

在 ant 设计中操作 json 数据以适应树数据表

Manipulate json data to fit in tree data table in ant design

评论

评论