欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 家装 > 将一个数组对象按照某个字段分组,组装成antd Tree数据结构

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

2025/2/25 19:18:30 来源:https://blog.csdn.net/u010234868/article/details/145687823  浏览:    关键词:将一个数组对象按照某个字段分组,组装成antd Tree数据结构

        如代码所示将一个数组对象按照某个字段分组,组装成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"}]}
]

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词