parentId扁平数据格式转换成带有children的层级数据格式

需求:

后台给到一些数据,我是想通过js来把这些数据变成树的格式。因为我使用element-ui里面的el-tree组件,使用该组件需要的数据格式是这种的,带有层级的,有children的。

在这里插入图片描述
但是后台给我的是这种的,扁平的,通过parentid来找爸爸的。

[
                { "id": "9", "pId": "5", "name": "哈哈哈", "open": true, "checked": false, "ext": "", "modify": false, "enable": true },
                { "id": "10", "pId": "6", "name": "嘻嘻嘻", "open": true, "checked": false, "ext": "", "modify": false, "enable": true },
                ........
            ]

这种数据就需要根据,pId(就是父亲的id,parentId)来找层级对应关系。

经过:

找了很多百度的方法,发现全都行不通(其实不是百度的方法不正确,而是我…后面有讲)。最后还是同事帮忙写了这个方法解决的。

	// 你只需要传入arr这个参数就行,其他甭管。而且,你一定要问清楚你公司的后端,最高层级(也就是该数据没有上一层了,自己就是最外层)的对象的pid会给什么,
	// 我公司最高层级的对象的pId是给的空字符串,所以 let c = createArr({}, arr, pid = ''); 就写了pid = ‘’,如果你公司是给null,或者甚至连个pid的字段都不给
	// 那么你就改成 let c = createArr({}, arr, pid = null); 或者 let c = createArr({}, arr, pid = undefind);  

            function createArr(data, arr, id) {
                let filtersList = arr.filter(e => e.pId === id);
                data.childrens = filtersList;
                data.childrens = data.childrens.map(e => {
                    e = createArr(e, arr, e.id);
                    return e;
                });
                return data;
            }

            let c = createArr({}, arr, pid = '');

在这里插入图片描述

坑:

提示:你练习或者写数据的时候,数组里面一定要确定至少有一个pid是空字符串或者null或者没这个字段,不然的话,你就和我错的一样。
因为你数组里面全部的对象都有pid字段,并且有值。那么你转化成层级数据的过程中,代码就发现你数据里面,就没有可以做为最外层的元素(可以理解为祖先)。我犯错误的原因就是:因为要改造的扁平数组有三百多条对象,所以我为了简便,就只拷贝了里面的十多条数据出来写demo。但是刚刚好这些数据全都有pid,所以写的方法导致最终找不到你最最最外层的祖先元素,所以一直是返回一个空数组。所以我误认为百度上面扁平化数据转为层级数据的博客全都是狗屎,其实最终我才是小丑。

在这里插入图片描述

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值