js把有父子关系的数据转成树形结构

最终打印的树形数据:
js把有父子关系的数据转成树形结构_第1张图片

代码如下:

const data = [
    {"id":1,"name":"四川省"},
     {"id":2,"name":"绵阳市","pid":1},
     {"id":3,"name":"成都市","pid":1},
     {"id":4,"name":"涪城区","pid":2},
     {"id":5,"name":"安州区","pid":2},
     {"id":6,"name":"青羊区","pid":3},
     {"id":7,"name":"金牛区","pid":3},
     {"id":8,"name":"苏坡乡","pid":6},
     {"id":9,"name":"文家乡","pid":6}
]
let tree = [];

function parentData(data){
    data.map(item =>{
         if(!item.hasOwnProperty("pid")){//是否含有pid,如果没有则是第一层
            let obj = {
                id:item.id,
                name:item.name,
                childer:[]
            }
            tree.push(obj)//把最外层父级push进去
        }
       
    })
    
	childerData(tree)//调用childerData这个方法,传入第一层父级元素
    
}
function childerData(tree){
       for(let i=0;i<tree.length;i++){//循环树形父级元素
          for(let j = 0;j<data.length;j++){//循环数据
          //判断数据的pid是不是等于父级的id,如果是则代表是当前父级的子级
              if(tree[i].id == data[j].pid){
                  let obj = {
                      id:data[j].id,
                      name:data[j].name,
                      childer:[]
                  }
                  console.log(data[j])
                  tree[i].childer.push(obj);//加入到父级的子级数组中
              }
          }
           childerData(tree[i].childer)//递归调用自己,传入第二层元素
         
      }
  }

parentData(data)//调用方法
console.log(tree)

参考文章链接

你可能感兴趣的:(js,javascript,前端,开发语言)