js递归生成树形结构、

后端获取json数组,成树结构,下面直接上代码。

首先集合的数据格式是这样的。

数据:

[
    {
        "id": 1,
        "name": "11111111楼",
        "parentId": 0
    },
    {
        "id": 2,
        "name": "2楼",
        "parentId": 0
    },
    {
        "id": 4,
        "name": "1楼儿子2",
        "parentId": 1
    },
    {
        "id": 6,
        "name": "你是谁啊",
        "parentId": 4
    },
    {
        "id": 12,
        "name": "566666",
        "parentId": 2
    },
    {
        "id": 13,
        "name": "33333楼",
        "parentId": 0
    },
    {
        "id": 14,
        "name": "7567566765",
        "parentId": 13
    },
    {
        "id": 15,
        "name": "1312",
        "parentId": 6
    }
]

生成树结构代码:

 load() {
                loadCatOptions().then(res => {//发送请求获取数据
                    this.catOptions = this.generateOptions(res);
                    console.log(this.catOptions);
                })
            },

            generateOptions(params) {//生成Cascader级联数据
                var result = [];
                for (let param of params) {
                    if (param.parentId == 0) {//判断是否为顶层节点
                        var parent = {//转换成el-Cascader可以识别的数据结构
                            'label': param.name,
                            'value': param.id
                        }
                        parent.children = this.getchilds(param.id, params);//获取子节点
                        result.push(parent);
                    }
                }
                return result;
            },

            getchilds(id, array) {
                let childs = new Array();
                for (let arr of array) {//循环获取子节点
                    if (arr.parentId == id) {
                        childs.push({
                            'label': arr.name,
                            'value': arr.id
                        });
                    }
                }
                for (let child of childs) {//获取子节点的子节点
                    let childscopy = this.getchilds(child.value, array);//递归获取子节点
                    console.log(childscopy)
                    if (childscopy.length > 0) {
                        child.children = childscopy;
                    }
                }
                return childs;
            },

转换后的数据:

[
    {
        "children": [
            {
                "children": [
                    {
                        "children": [
                            {
                                "label": "1312",
                                "value": 15
                            }
                        ],
                        "label": "你是谁啊",
                        "value": 6
                    }
                ],
                "label": "1楼儿子2",
                "value": 4
            }
        ],
        "label": "11111111楼",
        "value": 1
    },
    {
        "children": [
            {
                "label": "566666",
                "value": 12
            }
        ],
        "label": "2楼",
        "value": 2
    },
    {
        "children": [
            {
                "label": "7567566765",
                "value": 14
            }
        ],
        "label": "33333楼",
        "value": 13
    }
]

 

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值