当前位置：首页 > article >正文

将一个数组对象按照某个字段分组，组装成antd Tree数据结构

article 2025/3/1 20:33:15

如代码所示将一个数组对象按照某个字段分组，组装成antd Tree数据结构，此处按照fieldName字段分组，每组包含的内容为skillsName：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const data = [ // 原始数据
      {
        "skillsId": "001-01",
        "skillsName": "生成技能1",
        "fieldId": "1",
        "fieldName": "网络故障",
      },
      {
        "skillsId": "001-02",
        "skillsName": "生成技能2",
        "fieldId": "1",
        "fieldName": "网络故障",
      },
      {
        "skillsId": "001-03",
        "skillsName": "生成技能3",
        "fieldId": "1",
        "fieldName": "网络故障",
      },
      {
        "skillsId": "002-01",
        "skillsName": "研判技能1",
        "fieldId": "1",
        "fieldName": "网络故障",
      },
      {
        "skillsId": "002-02",
        "skillsName": "研判技能2",
        "fieldId": "1",
        "fieldName": "网络故障",
      },
      {
        "skillsId": "003-01",
        "skillsName": "故障定级技能1",
        "fieldId": "1",
        "fieldName": "网络故障",
      },
      {
        "skillsId": "007-01",
        "skillsName": "受理技能1",
        "fieldId": "2",
        "fieldName": "网络投诉",
      },
      {
        "skillsId": "007-02",
        "skillsName": "受理技能2",
        "fieldId": "2",
        "fieldName": "网络投诉",
      },
      {
        "skillsId": "007-03",
        "skillsName": "受理技能3",
        "fieldId": "2",
        "fieldName": "网络投诉",
      },
      {
        "skillsId": "009-01",
        "skillsName": "定界技能1",
        "fieldId": "2",
        "fieldName": "网络投诉",
      },
      {
        "skillsId": "009-02",
        "skillsName": "定界技能2",
        "fieldId": "2",
        "fieldName": "网络投诉",
      },
      {
        "skillsId": "012-01",
        "skillsName": "工单转派技能1",
        "fieldId": "2",
        "fieldName": "网络投诉",
      }
    ];

    const transformData = (data) => {
      const map = {};
      data.forEach(item => {
        if (!map[item.fieldId]) {
          map[item.fieldId] = {
            key: item.fieldId,
            title: item.fieldName,
            children: []
          };
        }
        map[item.fieldId].children.push({
          key: item.skillsId,
          title: item.skillsName
        });
      });
      return Object.values(map);
    };

    const treeData = transformData(data);
    console.log(JSON.stringify(treeData, null, 2));
    
  </script>
</body>

</html>

代码通过遍历原始数据，使用一个对象 map 来按 fieldId 分组，并为每个组创建一个包含 key、title 和 children 属性的对象。然后，将每个技能的 skillsId 和 skillsName 添加到相应组的 children 数组中。最后，使用 Object.values() 方法将 map 对象转换为一个数组，得到所需的树结构数据。

输出结果为：

[
  {
    "key": "1",
    "title": "网络故障",
    "children": [
      {
        "key": "001-01",
        "title": "生成技能1"
      },
      {
        "key": "001-02",
        "title": "生成技能2"
      },
      {
        "key": "001-03",
        "title": "生成技能3"
      },
      {
        "key": "002-01",
        "title": "研判技能1"
      },
      {
        "key": "002-02",
        "title": "研判技能2"
      },
      {
        "key": "003-01",
        "title": "故障定级技能1"
      }
    ]
  },
  {
    "key": "2",
    "title": "网络投诉",
    "children": [
      {
        "key": "007-01",
        "title": "受理技能1"
      },
      {
        "key": "007-02",
        "title": "受理技能2"
      },
      {
        "key": "007-03",
        "title": "受理技能3"
      },
      {
        "key": "009-01",
        "title": "定界技能1"
      },
      {
        "key": "009-02",
        "title": "定界技能2"
      },
      {
        "key": "012-01",
        "title": "工单转派技能1"
      }
    ]
  }
]

查看全文

http://www.kler.cn/a/550532.html