将后端传回的数据转成树形结构

1.需求

后端传的数据(已经做过简单的处理)

let obj = [
            {
                "id": "01272701",
                "no": "2701",
                "name": "2701",
                "buildingId": "RLD5901",
                "floorNo": "27层",
                "floorCode": "RLD590127",
                "buildingName": "综合楼",
                "buildingNum": "01",
            },
            {
                "id": "01272702",
                "no": "2702",
                "name": "2702",
                "buildingId": "RLD5901",
                "floorNo": "27层",
                "floorCode": "RLD590127",
                "buildingName": "综合楼",
                "buildingNum": "01",
            },
            {
                "id": "01272703",
                "no": "2703",
                "name": "2703",
                "buildingId": "RLD5901",
                "floorNo": "27层",
                "floorCode": "RLD590127",
                "buildingName": "综合楼",
                "buildingNum": "01",
            },
            {
                "id": "02010105",
                "no": "105",
                "name": "105",
                "buildingId": "RLD2302",
                "floorNo": "01层",
                "floorCode": "RLD230201",
                "buildingName": "实训楼",
                "buildingNum": "02",
            },
            {
                "id": "02010106",
                "no": "106",
                "name": "106",
                "buildingId": "RLD2302",
                "floorNo": "01层",
                "floorCode": "RLD230201",
                "buildingName": "实训楼",
                "buildingNum": "02",
            }
        ]

需求结果

 2.运行代码

function roomInfos(list) {
            let obj = []
            //     // 遍历初始数组
            list.forEach((item, index) => {
                //         // 如果存放的数组为空,直接添加
                if (!obj.length) {
                    let roomObj = {
                        id: item.id,
                        name: item.name
                    };
                    let floor = {
                        id: item.floorCode,
                        name: item.floorNo,
                        children: [roomObj]
                    };
                    obj.push({
                        id: item.buildingId,
                        name: item.buildingName,
                        children: [floor]
                    });
                } else {
                    // 比对所有obj子代中所有id,没有的话向obj中添加对象,去重
                    let buildIndex = obj.findIndex(i => i.id === item.buildingId)
                    if (buildIndex === -1) {
                        let roomObj = {
                            id: item.id,
                            name: item.name
                        };
                        let floor = {
                            id: item.floorCode,
                            name: item.floorNo,
                            children: [roomObj]
                        };
                        obj.push({
                            id: item.buildingId,
                            name: item.buildingName,
                            children: [floor]
                        });
                    } else {
                        let floorIndex = obj[buildIndex].children.findIndex(i => i.id === item.floorCode)
                        if (floorIndex === -1) {
                            let roomObj = {
                                id: item.id,
                                name: item.name
                            };
                            obj[buildIndex].children.push({
                                id: item.floorCode,
                                name: item.floorNo,
                                children: [roomObj]
                            });
                        } else {
                            let isHave = obj[buildIndex].children[floorIndex].children.some(p => p.id === item.id)
                            if (!isHave) {
                                obj[buildIndex].children[floorIndex].children.push({
                                    id: item.id,
                                    name: item.name,
                                })
                            }
                        }
                    }
                }
            })
            return obj
        }


        let a = roomInfos(obj)
        console.log(a);

总结:在排序的时候,要比对同价所有对象;

3.对这个数据结构进行维护

let obj3 = [{
            "id": "598621957180624896",
            "name": "综合楼",
            "children": [
                {
                    "id": "RLD220922000000230023",
                    "name": "27层",
                    "children": [
                        {
                            "id": "598626148393422848",
                            "name": "2701"
                        }
                    ]
                }
            ]
        }]


//对其中的一个树枝数据进行数据添加
 const findValue = (treeData, value) => {
            const fn = (treeData, value) => {
                let fnIndex = treeData.findIndex(i => i.id === value.id);
                if (fnIndex == -1) {
                    treeData.unshift(value)
                } else {
                    if (treeData[fnIndex]?.children?.length) {
                        fn(treeData[fnIndex].children, value.children)
                    }
                }
            }
            fn(treeData, value)
            return treeData
        }


//对其中的一个树枝数据进行数据平替
const updateTreeData = (treeData, buildKey,floorKey,value) => {
            let findBuildIndex =treeData.findIndex(i=>i.id===buildKey);
            let findFloorIndex =treeData[findBuildIndex].children.findIndex(i=>i.id=== floorKey);
            treeData[findBuildIndex].children[findFloorIndex].children=value[0].children[0].children
            return treeData
        };
        let up = updateTreeData(ke,"598621957180624896", "RLD220922000000230023", obj3)

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值