JavaScript将数组对象数据转换为树形结构

特别注意:为了逻辑比较清晰,下面的代码内容相对较多,但是可以兼容各种传入数组数据,例如:在存在搜索业务的情况下,传入的内容存在不一定存在一级节点的情况

let tableDefaultData = [
        { key: "1", title: renderTitle('1'), age: 27, parentKey: "0" },
        { key: "1.1", title: renderTitle("1.1"), age: 27, parentKey: "1", name: '小谭' },
        { key: "1.2", title: renderTitle("1.2"), age: 27, parentKey: "1" },
        { key: "1.1.1", title: renderTitle("1.1.1"), age: 27, parentKey: "1.1", name: '小谭' },
        { key: "1.2.1", title: renderTitle("1.2.1"), age: 27, parentKey: "1.2" },
        { key: "1.1.1.1", title: renderTitle("1.1.1.1"), age: 27, parentKey: "1.1.1" },
        { key: "2", title: renderTitle("2"), age: 27, parentKey: "0" },
        { key: "2.1", title: renderTitle("2.1"), age: 27, parentKey: "2" },
        { key: "2.1.1", title: renderTitle("2.1.1"), age: 27, parentKey: "2.1", name: '小谭' },
    ];

    const getTreeData = (paramArr: any) => {
        let arr = [...paramArr];
        if (paramArr.length > 0) {
            const handleTreeData = (key = paramArr[0].parentKey) => {
                const parentNode = arr.filter((item: { parentKey: string }) => item.parentKey === key); //获取所有一级数据
                const newData = parentNode.map((item: { key: any }) => {
                    arr = arr.filter((item: any) => item.key !== item.key); //移动掉原数组里面的数据
                    const obj = arr.find((val: { parentKey: any }) => val.parentKey === item.key);
                    if (obj) {
                        //判断当前遍历的数据是否存在子级
                        const childData: any = handleTreeData(obj.parentKey);
                        return { ...item, children: childData };
                    }
                    return { ...item, children: [] };
                });
                return newData;
            };
            const data = arr.map(item => { //得到每次遍历的结果数组
                return handleTreeData(item.parentKey);
            });
            const result = [];
            for (let i = 0; i < data.length; i++) {
                if (data[i].length > 0) {
                    result.push(...data[i])
                }
            }
            return result;
        }
        return [];
    }
getTreeData(tableDefaultData )
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值