美文网首页
一维数组转树形结构

一维数组转树形结构

作者: Peter_2B | 来源:发表于2021-08-27 15:03 被阅读0次
    var data = [
        {
            id:2,
            pid:0,
            name:'222'
        },
        {
            id:3,
            pid:2,
            name:'333'
        },
        {
            id:4,
            pid:3,
            name:'444'
        },
        {
            id:5,
            pid:3,
            name:'555'
        },
        {
            id:6,
            pid:0,
            name:'666'
        },
        {
            id:7,
            pid:6,
            name:'777'
        },
        {
            id:8,
            pid:7,
            name:'888'
        },
        {
            id:9,
            pid:7,
            name:'999'
        }
    ]
    

    第一种方式

    function formatDataTree2(data){
        let _data = JSON.parse(JSON.stringify(data));
        
        for(var p of _data){
            const _arr = _data.filter( c => p.id === c.pid);
            if(_arr.length>0){
                p.children = _arr;
            }
        }
        var tree = _data.filter( p => p.pid === 0);
        return tree;
    }
    
    var res = formatDataTree2(data);
    console.log(res);
    

    第二种方式:

    function formatDataTree(data){
        let parents = data.filter(item=>item.pid === 0);
        let children = data.filter(item=>item.pid !== 0);
    
        changeToTree(parents, children);
    
        return parents;
    }
    
    function changeToTree(parents, children){
        
        parents.forEach( p =>{
    
            children.forEach((c, i)=>{
    
                if(p.id === c.pid){
              
                    if(p.children){
                        p.children.push(c);
                    }else{
                        p.children = [c];
                    }
    
                    let _children = JSON.parse(JSON.stringify(children));
                    _children.splice(i, 1);
                    changeToTree([c], _children);
                }
    
            });
    
        })   
    }
    
    var res = formatDataTree(data);
    console.log(res);
    

    树结构

    [{
        "id": 2,
        "pid": 0,
        "name": "222",
        "children": [{
            "id": 3,
            "pid": 2,
            "name": "333",
            "children": [{
                "id": 4,
                "pid": 3,
                "name": "444"
            }, {
                "id": 5,
                "pid": 3,
                "name": "555"
            }]
        }]
    }, {
        "id": 6,
        "pid": 0,
        "name": "666",
        "children": [{
            "id": 7,
            "pid": 6,
            "name": "777",
            "children": [{
                "id": 8,
                "pid": 7,
                "name": "888"
            }, {
                "id": 9,
                "pid": 7,
                "name": "999"
            }]
        }]
    }]
    

    相关文章

      网友评论

          本文标题:一维数组转树形结构

          本文链接:https://www.haomeiwen.com/subject/hoymiltx.html