数组数据 转化为 树状结构数据

codepen地址:

codepen地址

var aTree = [
    {"id": "1", "name": "动物", "pid": "0"},
    {"id": "2", "name": "鸟类", "pid": "5"},
    {"id": "3", "name": "无脊椎动物", "pid": "1"},
    {"id": "4", "name": "哺乳动物", "pid": "5"},
    {"id": "5", "name": "脊椎动物", "pid": "1"},
    {"id": "6", "name": "喜鹊", "pid": "2"},
    {"id": "7", "name": "蚯蚓", "pid": "3"}
];
function getParent(id, aTree) {
    var aParent = [];
        aTree.map((item,index)=>{
          if(item.pid==id){
            aParent.push(item);
          }
        })
        // for (var i in aTree) {
        //     if (aTree[i].pid == id) {
        //         aParent.push(aTree[i]);
        //     }
        // }
    return aParent;
}


var menu = '';
function makeTree(id, aTree){
    var topMenu = getParent(id, aTree);
    if (topMenu.length > 0) {
      topMenu.map((item,index)=>{
        menu += '<a href="#" onClick="alert('+item.id+')">' + item.name + '</a>';
            menu += '<ul>' // 为了区分层次，我们给每一个子级都包上一层ul
            makeTree(item.id, aTree);
            menu += '</ul>'
      })
        // for (var i in topMenu) {
        //     menu += '<a href="#">' + topMenu[i].name + '</a>';
        //     menu += '<ul>' // 为了区分层次，我们给每一个子级都包上一层ul
        //     makeTree(topMenu[i].id, aTree);
        //     menu += '</ul>'
        // }
    }
}
makeTree(0, aTree);
$('body').append(menu);

互相转换

//数组=>树形结构
let  aTree = [
    {"id": "1", "name": "动物", "pid": "0"},
    {"id": "2", "name": "鸟类", "pid": "5"},
    {"id": "3", "name": "无脊椎动物", "pid": "1"},
    {"id": "4", "name": "哺乳动物", "pid": "5"},
    {"id": "5", "name": "脊椎动物", "pid": "1"},
    {"id": "6", "name": "喜鹊", "pid": "2"},
    {"id": "7", "name": "蚯蚓", "pid": "3"}
];
function treeData(data){   
    let cloneData = JSON.parse(JSON.stringify(data))
    return cloneData.filter(parent=>{
        let branchArr = cloneData.filter(child => parent['id'] == child['pid']);
        branchArr.length>0 ? parent['children'] = branchArr : '';
        return parent['pid'] == 0 ;
    })
}

var newTree = treeData(aTree)
console.log(newTree);
$('.tree').append(JSON.stringify(newTree))
//树形结构=>数组
function flatten2 (data,pid) {
  return data.reduce((arr, {id, name, children = []}) =>
    arr.concat([{id, name,pid}], flatten2(children,id)), [])
} 
var newArr = flatten2(newTree,0);

组装树形结构数据

createTree(arr,pid){
    let tree = [];
    arr.forEach(e=> {
      if(pid == e.pid){
         e.child = this.createTree(arr,e.id);
         tree.push(e);
       }
    });
    return tree;
}