遍历处理pid的数据

将该数组解析处理为嵌套结构

let adreeJson = [
            {id: 1, name: '陕西省', pid: 0},
            {id: 2, name: '山西省', pid: 0},
            {id: 3, name: '广东省', pid: 0},
            {id: 4, name: '西安市', pid: 1},
            {id: 5, name: '宝鸡市', pid: 1},
            {id: 6, name: '莲湖区', pid: 4},
            {id: 7, name: '雁塔区', pid: 4},
            {id: 8, name: '深圳市', pid: 3},
            {id: 9, name: '宝安区', pid: 8},
        ]
let adressTree = [
            {
                id: 1, name: '陕西省', pid: 0,
                child: [
                    {
                        id: 4, name: '西安市', pid: 1,
                        child: [
                            {id: 6, name: '莲湖区', pid: 4},
                            {id: 7, name: '雁塔区', pid: 4},
                        ]
                    },
                    {
                        id: 5, name: '宝鸡市', pid: 1
                    },
                ]
            },
            {
                id: 2, name: '山西省', pid: 0,
                child: []
            },
            {
                id: 3, name: '广东省', pid: 0,
                child: [
                    {
                        id: 8, name: '深圳市', pid: 3,
                        child: [
                            {id: 9, name: '宝安区', pid: 8}
                        ]
                    }
                ]
            },
        ]

方法一

先获取顶级节点,然后再通过递归获取其子节点

function getTop(arry) {
            return arry.filter(item => item.id == item.pid || item.pid == 0)
        }

        function getChild(pArry, arry) {
            pArry.forEach(idt => {
                idt.child = arry.filter(item => idt.id == item.pid)
                if ((idt.child).length > 0) {
                    getChild(idt.child, arry)
                }
            })
            return pArry
        }

        let topTree = getTop(adreeJson)
        console.log(getChild(topTree, adreeJson))

方法二

也是先获取父节点,然后再递归得到子节点

//获取顶级节点
        function getParent(arry, id) {
            var newArry = new Array();
            for (let i in arry) {
                if (arry[i].pid == id)
                    newArry.push(arry[i]);
            }
            return newArry;
        }

        function getTree(arrys, id) {
            //深拷贝,否则会影响原数组
            let arry = JSON.parse(JSON.stringify(arrys))
            let childArry = getParent(arry, id);
            if (childArry.length > 0) {
                for (let i in childArry) {
                    //递归得到每个父节点的子节点
                    let _c_c_a = getTree(arry, childArry[i].id);
                    _c_c_a.length > 0 ? childArry[i].child = _c_c_a : childArry[i].child = []
                }
            }
            return childArry
        }

        console.log(getTree(adreeJson, 0))

方法三

/*通过定义map,key为当前对象id,value为该对象
        遍历集合,得到对象顶级节点放到集合中返回
        不是顶级的就是当前对象得子节点,将对象放到该节点下*/
        function toTree(nodes) {
            let result = []
            //如果值是 Array,则为true; 否则为false。
            if (!Array.isArray(nodes)) {
                return result
            }
            //深拷贝,否则会影响原数组
            let node = JSON.parse(JSON.stringify(nodes))
            //根据父节点进行拼接子节点,
            node.forEach(item => delete item.child)//已经有的话就删掉
            //把每一项的引用放入map对象里
            let map = {}
            node.forEach(item => map[item.id] = item)
            let newNode = []
            node.forEach(dt => {
                let parents = map[dt.pid]
                if (parents) {
                    //如果 map[dt.pid] 有值 则 parents 为 dt 的父级
                    //判断 parents 里有无child 如果没有则创建 如果有则直接把 dt push到child里
                    ((parents.child) || (parents.child = [])).push(dt)
                    //等同于:
                    // if (!parents.child) {
                    //     parents.child = []
                    // }
                    // (parents.child).push(dt)
                } else {
                    newNode.push(dt)
                }
            })
            return newNode
        }

        console.log(toTree(adreeJson))

 遍历所有节点,判断是否存在与pid对应的id,存在就将其放入对应id的child中,没有child就创建child,最后再筛选pid为0或为null的(就是将最上级筛选出来,过滤掉有父级的),值得推荐的方法

var flatToTree = flats => {
            flats.forEach(item => {
                var index = flats.findIndex(item1 => item1.id === item.pid)
                if (index !== -1) {
                    //判断 flats[index] 里有无child 如果没有则创建 如果有则直接把 item push到child里
                    ((flats[index].child) || (flats[index].child = [])).push(item)
                    //等同于:
                    // if (!flats[index].child) {
                    //     flats[index].child = []
                    // }
                    // flats[index].child.push(item)
                    //或:
                    // flats[index].child = flats[index].child || []
                    // flats[index].child.push(item)
                }
            })
            return flats.filter(dt => dt.pid === 0)//只获取父节点为0的值
        }
        console.log(flatToTree(adreeJson))
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值