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

一维数组转树形结构

作者: 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