js 数据组合，一级结构组合成父子嵌套数组结构

最新推荐文章于 2025-04-03 15:51:02 发布
最新推荐文章于 2025-04-03 15:51:02 发布
阅读量237 收藏
点赞数 2
文章标签： javascript 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wwf1225/article/details/145281838
版权

1.方法

buildDeptTree(deptData) { //构建树状部门
        // 创建一个 map 来存储 deptId 和对应的部门对象
        const deptMap = new Map();
        // 初始化每个部门对象的 children 属性为空数组
        deptData.forEach(dept => {
            dept.children = [];
            deptMap.set(dept.deptId, dept);
        });
        // 构建树形结构
        let rootDepts = [];
        deptData.forEach(dept => {
            if (dept.parentId === 0) {
                rootDepts.push(dept);
            } else {
                const parentDept = deptMap.get(dept.parentId);
                if (parentDept) {
                    parentDept.children.push(dept);
                }
            }
        });
        // 移除所有 children 为空的数组
        function removeEmptyChildren(depts) {
            depts.forEach(dept => {
                if (dept.children.length === 0) {
                    delete dept.children;
                } else {
                    removeEmptyChildren(dept.children);
                }
            });
        }
        removeEmptyChildren(rootDepts);
        return rootDepts;
    },

2.应用

this.buildDeptTree(res.data);

3.数据：

[
    {
        "createBy": "admin",
        "createTime": "2023-09-06 08:20:03",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 100,
        "parentId": 0,
        "ancestors": "0",
        "deptName": "普陀",
        "orderNum": 0,
        "leader": "admin",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:43:21",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 262,
        "parentId": 100,
        "ancestors": "0,100",
        "deptName": "投促办",
        "orderNum": 1,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-18 11:20:17",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 312,
        "parentId": 100,
        "ancestors": "0,100",
        "deptName": "委办",
        "orderNum": 1,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2023-09-06 08:20:03",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 101,
        "parentId": 100,
        "ancestors": "0,100",
        "deptName": "上海联通分公司",
        "orderNum": 1,
        "leader": "若依",
        "phone": "15888888888",
        "email": "ry@qq.com",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2024-12-20 14:41:07",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 232,
        "parentId": 100,
        "ancestors": "0,100",
        "deptName": "诉求",
        "orderNum": 1,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:51:51",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 266,
        "parentId": 100,
        "ancestors": "0,100",
        "deptName": "街道",
        "orderNum": 1,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2023-10-17 14:25:10",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 210,
        "parentId": 100,
        "ancestors": "0,100",
        "deptName": "XX联通分公司",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2023-09-06 08:20:03",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 103,
        "parentId": 101,
        "ancestors": "0,100,101",
        "deptName": "研发部门",
        "orderNum": 1,
        "leader": "若依",
        "phone": "15888888888",
        "email": "ry@qq.com",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2023-09-06 08:20:03",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 105,
        "parentId": 101,
        "ancestors": "0,100,101",
        "deptName": "测试部门",
        "orderNum": 2,
        "leader": "若依",
        "phone": "15888888888",
        "email": "ry@qq.com",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2024-12-20 14:41:40",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 243,
        "parentId": 232,
        "ancestors": "0,100,232",
        "deptName": "诉求协办部门",
        "orderNum": 1,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2024-12-20 14:41:29",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 242,
        "parentId": 232,
        "ancestors": "0,100,232",
        "deptName": "诉求会办部门",
        "orderNum": 1,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2024-12-20 14:41:20",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 233,
        "parentId": 232,
        "ancestors": "0,100,232",
        "deptName": "诉求主办部门",
        "orderNum": 1,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 16:34:55",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 303,
        "parentId": 262,
        "ancestors": "0,100,262",
        "deptName": "桃浦地区投促中心",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 16:35:09",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 304,
        "parentId": 262,
        "ancestors": "0,100,262",
        "deptName": "真如地区投促中心",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 16:35:18",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 305,
        "parentId": 262,
        "ancestors": "0,100,262",
        "deptName": "长风地区投促中心",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 16:35:27",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 306,
        "parentId": 262,
        "ancestors": "0,100,262",
        "deptName": "长征地区投促中心",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:47:25",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 263,
        "parentId": 262,
        "ancestors": "0,100,262",
        "deptName": "项目推进科",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:47:36",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 272,
        "parentId": 262,
        "ancestors": "0,100,262",
        "deptName": "企业服务科",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:47:47",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 273,
        "parentId": 262,
        "ancestors": "0,100,262",
        "deptName": "地区指导科",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:50:39",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 264,
        "parentId": 262,
        "ancestors": "0,100,262",
        "deptName": "经济运行科",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:50:22",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 282,
        "parentId": 262,
        "ancestors": "0,100,262",
        "deptName": "办公室主任",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:51:30",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 265,
        "parentId": 262,
        "ancestors": "0,100,262",
        "deptName": "综合科",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:51:39",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 274,
        "parentId": 262,
        "ancestors": "0,100,262",
        "deptName": "产业发展科",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 16:34:42",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 302,
        "parentId": 262,
        "ancestors": "0,100,262",
        "deptName": "长寿地区投促中心",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:52:56",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 285,
        "parentId": 266,
        "ancestors": "0,100,266",
        "deptName": "石泉路街道",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:52:30",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 292,
        "parentId": 266,
        "ancestors": "0,100,266",
        "deptName": "长寿路街道",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:52:39",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 283,
        "parentId": 266,
        "ancestors": "0,100,266",
        "deptName": "曹杨路街道",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:52:47",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 284,
        "parentId": 266,
        "ancestors": "0,100,266",
        "deptName": "宜川路街道",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:53:03",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 286,
        "parentId": 266,
        "ancestors": "0,100,266",
        "deptName": "甘泉路街道",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:53:11",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 287,
        "parentId": 266,
        "ancestors": "0,100,266",
        "deptName": "真如镇街道",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:53:17",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 288,
        "parentId": 266,
        "ancestors": "0,100,266",
        "deptName": "万里街道",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:53:25",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 289,
        "parentId": 266,
        "ancestors": "0,100,266",
        "deptName": "长风街道",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:53:34",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 290,
        "parentId": 266,
        "ancestors": "0,100,266",
        "deptName": "长征镇",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-02 10:53:43",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 291,
        "parentId": 266,
        "ancestors": "0,100,266",
        "deptName": "桃浦镇",
        "orderNum": 2,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    },
    {
        "createBy": "admin",
        "createTime": "2025-01-18 11:20:28",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "deptId": 313,
        "parentId": 312,
        "ancestors": "0,100,312",
        "deptName": "财政局",
        "orderNum": 1,
        "leader": "",
        "phone": "",
        "email": "",
        "status": "0",
        "delFlag": "0",
        "parentName": null,
        "children": []
    }
]

wwf1225
关注
JS对象数组子级合并到父级
莉兹Liz的博客
04-02 2001
对象数组有最多三层结构，最外层对象数组、children内嵌套对象数组、嵌套数组内children嵌套的对象数组，即如下的arr。 别人问的问题，傻瓜解法。循环遍历，push方法即可将子级放进父级中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）
datian45678的博客
06-22 1763
整理了一些前端面试题，希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大，主要针对初中级前端开发工程师。 篇幅过长，大家可以先点赞收藏以后慢慢看。 关于HTML 的title和alt属性有什么区别 alt：图片加载失败时，显示在网页上的替代文字 title：鼠标（手机端该属性无意义）放在图片上时显示的文字 alt是必需属性（但属性值可为空），title非必需 图片懒加载的原理 图像是img标记，浏览器根据图像的src属性请求图像，因此惰性加载的关键是当图像不在可视区域时，不给`imgs‘赋值。 懒加载
JavaScript 把树状关系数组重置为父子结构数组，并可以把子孙的code都放到父级的json中
weixin_42047414的博客
05-31 275
处理具有上下级关系的数组
JS树形结构，通过子节点，查找上级所有父节点
weixin_72589507的博客
11-17 6481
Vue.js 树形结构，通过子节点，查找所有上级父节点 JS 递归，通过已知id，查找它的所有上级id
使用js实现将有父子关系的数据转换成树形结构数据
MySunshine07的博客
03-27 1762
1
vue 将平级数据处理成父子节点数据
weixin_45844542的博客
04-29 546
场景：在调接口的时候后端反的数据是平级的对象，为了展示符合设计图上的数据，需要将数据进行处理 export default { data() { return { PlatformConfirm: [], //改造好的数组 }, methods: { // 将数据改造成父子结构 // Platform.serviceOrderItem 接口的数据数组 Platform.serviceOrderItem.forEach((item) =>
JavaScript 数组打平，数组多层子级合并为一个(树结构合并)数组，js递归打平数组
词不达意难知的博客
12-20 2270
JavaScript 数组打平，数组多层子级合并为一个(树结构合并)数组，js递归打平数组
平铺数组转换为树结构
Input的博客
01-16 573
【代码】平铺数组转换为树结构。
js多维数组降维处理
卡卡罗特的博客
02-19 878
在和后端兄弟对接接口的时候，经常遇到一个让人看着脑壳痛的数据形式：比如下图 你只是想要一个数组而已，但是后端返回的数据，让你脑壳疼，又得自己改造了数据了。像这样的[1, [2, [3, [4]], 5]];多维数组怎么简单处理成一维数组呢？ 当然你可以一次次遍历数组处理，这里介绍一个好用的插件 lodash.js库。里面有各种数组和对象的处理方法，自己自行查看api，这里主要讲讲数组的降维处理 注意先在页面引入lodash.js //浏览器环境： <script src="lodash
JavaScript中的数据结构和算法学习
一个前端初学者的博客
02-08 995
原文链接：http://caibaojian.com/learn-javascript.html本文主要讲述Javascript中实现栈、队列、链表、集合、字典、散列表、树、图等数据结构，以及各种排序和搜索算法，包括冒泡排序、选择排序、插入排序、归并排序、快速排序、顺序搜索、二分搜索，最后还介绍了动态规划和贪心算法等常用的高级算法及相关知识。在阅读之前假设你已了解并可以熟练使用Javascript...
【JS中树结构的动态构建】：JSON数据到树状结构的快速搭建
在 JavaScript 中，树形结构作为一种高级数据结构，承担着组织、存储和检索信息的重要角色。由于其层次性和分支特性，树结构在多种场合下都显得尤为关键，特别是在需要对数据进行快速分类和层次化展示时。本章将探讨...
【JS复杂树结构转换指南】：高级技巧与案例分析
在计算机科学中，树是一种重要的数据结构，用于模拟具有层次关系的数据集合。树结构由节点（或顶点）和连接这些节点的边组成，呈现出一种分层的树状结构。在JavaScript中，树结构可以通过嵌套的对象和数组来表示。 ...
【JS树结构转换调试技巧】：快速定位与问题解决
树结构是一种广泛应用于计算机科学中的数据组织形式，它模拟了真实世界中树的层次关系。在JavaScript中，树结构是通过对象和数组的组合来实现的，每个节点可以存储值和指向其他节点的引用。 ## 1.2 树结构在JS中的...
React PDF Annotation plugin library online API examples
WCX_joker的博客
04-03 569
The API includes ① Export edited PDF data; ② Export annotations json data; ③ Reload old annotations; ④ Change files; ⑤ Set member info; ⑥ Clear annotations and other data processing functions
elementui的默认样式修改
cxsj999的博客
03-31 250
可是我想让提示的位置到下面来，该怎么办？最后还是看了官方的api。原来有个自定义样式属性。
20250331-vue-组件事件1触发与监听事件
xiezhuangshunv的博客
03-31 382
和原生DOM事件不一样，组件触发的时间没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个全局状态管理方案。像组件与 prop 一样，事件的名字也提供了自动的格式转换。像3中的代码也可以这样写。父组件代码不变，子组件代码如下。这样点击效果就只会出现一次。
《无人茶室系统核心技术解析：从0到1打造高效智能管理平台》
weixin_62330360的博客
04-01 608
本文深入解析了无人茶室系统的核心技术，涵盖Spring Boot 后台、uni-app 用户端、Vue 管理后台的完整开发流程，并探讨了性能优化方案。你是否在开发类似项目时遇到挑战？欢迎在评论区交流你的经验！📌推荐阅读Spring Boot 官方文档MyBatis-Plus 官方文档uni-app 官方文档。
网络空间安全（50）JavaScript基础语法
最新发布
m0_73399576的博客
04-03 299
网络空间安全——JavaScript基础语法篇
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值