JS 将扁平化数组转化为树形结构

系统管理员 2023-02-17 05:04 238阅读 0赞

后台返回数据如下：

{  AREA_NAME: "浙江省", level: 0, PID: 0, AREA_CODE: 330000 },
                {  AREA_NAME: "杭州市", level: 1, PID: 330000, AREA_CODE: 330100 },
                {  AREA_NAME: "宁波市", level: 1, PID: 330000, AREA_CODE: 330200 },
                {  AREA_NAME: "温州市", level: 1, PID: 330000, AREA_CODE: 330300 },
                {  AREA_NAME: "嘉兴市", level: 1, PID: 330000, AREA_CODE: 330400 },
                {  AREA_NAME: "湖州市", level: 1, PID: 330000, AREA_CODE: 330500 },
                {  AREA_NAME: "上城区", level: 2, PID: 330100, AREA_CODE: 330102 },
                {  AREA_NAME: "下城区", level: 2, PID: 330100, AREA_CODE: 330103 },
                {  AREA_NAME: "江干区", level: 2, PID: 330100, AREA_CODE: 330104 },
                {  AREA_NAME: "河南省", level: 0, PID: 0, AREA_CODE: 410000 },
                {  AREA_NAME: "郑州市", level: 1, PID: 410000, AREA_CODE: 410100 },
                {  AREA_NAME: "开封市", level: 1, PID: 410000, AREA_CODE: 410200 }

先要将数据格式转化为：  
![树型结构][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ1MzEyNw_size_16_color_FFFFFF_t_70]  
代码如下：

var list1 = [
                {  AREA_NAME: "浙江省", level: 0, PID: 0, AREA_CODE: 330000 },
                {  AREA_NAME: "杭州市", level: 1, PID: 330000, AREA_CODE: 330100 },
                {  AREA_NAME: "宁波市", level: 1, PID: 330000, AREA_CODE: 330200 },
                {  AREA_NAME: "温州市", level: 1, PID: 330000, AREA_CODE: 330300 },
                {  AREA_NAME: "嘉兴市", level: 1, PID: 330000, AREA_CODE: 330400 },
                {  AREA_NAME: "湖州市", level: 1, PID: 330000, AREA_CODE: 330500 },
                {  AREA_NAME: "上城区", level: 2, PID: 330100, AREA_CODE: 330102 },
                {  AREA_NAME: "下城区", level: 2, PID: 330100, AREA_CODE: 330103 },
                {  AREA_NAME: "江干区", level: 2, PID: 330100, AREA_CODE: 330104 },
                {  AREA_NAME: "河南省", level: 0, PID: 0, AREA_CODE: 410000 },
                {  AREA_NAME: "郑州市", level: 1, PID: 410000, AREA_CODE: 410100 },
                {  AREA_NAME: "开封市", level: 1, PID: 410000, AREA_CODE: 410200 }
    
            ]
            function treeData(data) { 
                let cloneData = JSON.parse(JSON.stringify(data))
                return cloneData.filter(parent => {   //AREA_CODE 代表id PID代表 父级 pid
                    let branchArr = cloneData.filter(child => parent['AREA_CODE'] == child['PID']);
                    branchArr.length > 0 ? parent['children'] = branchArr : '';
                    return parent['PID'] == 0;
                })
            }
            treeData(list1)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ1MzEyNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200612143427107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ1MzEyNw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 数组扁平化

如有一个数组 var arr = \[1, \[2, 3, \[4\]\]\] ，我们怎么能把arr变成\[1, 2, 3, 4\]呢？即让多维数组降维，转换为只有一层的...

布满荆棘的人生/ 2024年04月17日 20:42/ 0 赞/ 160 阅读

相关 JS 将扁平化数组转化为树形结构

后台返回数据如下： { AREA_NAME: "浙江省", level: 0, PID: 0, AREA_CODE: 330000 },

系统管理员/ 2023年02月17日 05:04/ 0 赞/ 239 阅读

相关 JS中将对象转化为数组

把一个对象转数组 obj：{'未完成':5, '已完成':8, '待确认':4, '已取消':6} 转为 newObj:[{"未完成":5},{

布满荆棘的人生/ 2022年11月27日 05:30/ 0 赞/ 109 阅读

相关 JS 数组扁平化

数组扁平化是什么呢？举例的话就是 \[1,2,\[3,4\],\[5\]\] => \[1,2,3,4,5\]；将一个多维数组变为一个一维数组。实现方法如下： 1、red

ゞ浴缸里的玫瑰/ 2022年10月26日 12:59/ 0 赞/ 266 阅读

相关将嵌套的数组扁平化

对于一个像这样的嵌套数组：a=\[1,\[2,\[3,4\]\],5,6\]我们想要把它变成一个一维数组，有下面几种方法：方法一：递归 function pa

心已赠人/ 2022年05月15日 03:09/ 0 赞/ 276 阅读

相关 JS数组扁平化

一道笔试题，将一个嵌套数组扁平化处理。 ▍题目 > 将\[1,2,\[3,\[4,5\]\]\]转化成\[1,2,3,4,5\]。 ▍方法一：递归

朱雀/ 2022年05月12日 05:44/ 0 赞/ 306 阅读

相关 js将父子关系（含有pId）数据转化为树形结构数据，一维数组转化为二位数组

获取tree数据：调用方法获取tree，然后绑定在组件数据源上 ![70][] 将GetDeptListTree方法返回的tree数据绑定在组件上 ![7

ゝ一世哀愁。/ 2022年05月08日 07:20/ 0 赞/ 456 阅读

相关 JS扁平化（flatten）数组

JS扁平化分类： 1.对象扁平化（深度很深的对象，经过扁平化编程深度为 1 的对象）、 2.数组扁平化（降维过程，多维数组经过扁平化变成一维数组）。首先让我们思考一

ゞ浴缸里的玫瑰/ 2022年02月24日 14:20/ 0 赞/ 360 阅读

相关 js 数组扁平化

第一种 > 依次把每一项添加进新数组 > 如果为非数组，直接添加 > 如果为数组，则添加递归操作的结果 function flatten(ar

亦凉/ 2022年01月19日 02:25/ 0 赞/ 350 阅读

相关 JS中将对象转化为数组

[JS中将对象转化为数组][JS] 前言其实这本来应该是一个很基础的问题了，但我之做一想记录一下是因为之前因为对象转数组的时候卡住了后来弄了出来，但最近再遇到这个问题

傷城~/ 2021年09月07日 06:06/ 0 赞/ 584 阅读