一维数组转树形结构
2021-08-27 本文已影响0人
Peter_2B
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"
}]
}]
}]