js中把ajax获取的数据转化成树状结构（并做成多级联动效果）

Posted 2021-07-11 奥特曼　

1、首先通过ajax获取数据，此处省略，直接贴出获取到的数据格式

var arr = [{
    id: 1,
    name: "一级标题",
    pid: 0
}, {
    id: 2,
    name: "二级标题",
    pid: 0
}, {
    id: 3,
    name: "2.1级标题",
    pid: 2
}, {
    id: 4,
    name: "2.2级标题",
    pid: 2
}, {
    id: 5,
    name: "1.1级标题",
    pid: 1
}, {
    id: 6,
    name: "1.2级标题",
    pid: 1
}, {
    id: 7,
    name: "1.21级标题",
    pid: 6
}, {
    id: 8,
    name: "三级标题",
    pid: 0
}, {
    id: 9,
    name: "1.22级标题",
    pid: 6
}, {
    id: 10,
    name: "1.221级标题",
    pid: 9
}, {
    id: 11,
    name: "1.2211级标题",
    pid: 10
}, {
    id: 12,
    name: "1.2212级标题",
    pid: 10
}

2.定义函数 proJSON将获取到的数据转化为树状结构

function proJSON(oldArr, pid) {
    var newArr = [];
    var self = this;
    oldArr.map(function(item) {
        if(item.pid == pid) {
            var obj = {
                id: item.id,
                value: item.name
            }
            var childs = self.proJSON(oldArr, item.id);
            if(childs.length > 0) {
                obj.childs = childs
            }
            newArr.push(obj)
        }
 
    })
    return newArr;
};

3.调用函数，将原始数据转化为树状结构数据

 var testdata = proJSON(arr,0);
            console.log(testdata);   

此时输出的即为以下格式的树状结构

[{
    id: 1,
    value: "一级标题",
}, {
    id: 2,
    value: "二级标题",
    childs:[{
        id:3,
        value:"2.1级标题"
    }]
}
];

原文https://www.cnblogs.com/bing0709/p/10760743.html

方法2

    const list = [
    { id: '01', pid: '', 'name': '老王' },
    { id: '02', pid: '01', 'name': '小张' }
    ]

function fn(list) {
let map ={}
let treelist=[]
list.forEach(item => {
    if(!item.children){
        item.children=[]
    }
    map[item.id]=item
});
console.log(map);
 
list.forEach(item=>{
    let parent = map[item.pid]
    if(parent){
        parent.children.push(item)
    }else {
        treelist.push(item)
    }

})
return treelist
}

console.log(fn(list));

问题1. 找出 与 小刘 处于统一领导下的同事

function f(data, name){
  // 完成代码
}
const arr = f(data, '小刘')
console.log(arr) // 
//  [{id:"10", name: "小刘", pid:"04", job: "前端工程师"},
//  {id:"11", name: "小华", pid:"04", job: "后端工程师"},
//  {id:"12", name: "小李", pid:"04", job: "后端工程师"}]

    function f(data, name) {
        let arr = []
        data.forEach(item => {
            if (item.name === name) {
                let pid = item.pid
                data.forEach(element => {
                    if (pid === element.pid) {
                        arr.push(element)
                    }
                });
            }
        })
        return arr
    }
    const arr = f(data, '小刘')
    console.log(arr);

 问题2. 找出 小亮 的所有下属 

function f2(data, name){ 
}
const arr = f2(data, '小亮')
console.log(arr) // 
// [{id:"07", name: "小丽", pid:"02", job: "产品经理"},
// {id:"08", name: "大光", pid:"02", job: "产品经理"}]

function f2( data , name ){
const num = data.find(item => item.name === name).id
return data.filter(item => item.pid === num)
}

    function f2(data, name) {
        let arr = []
        data.forEach(item => {
            if (item.name === name) {
                let id = item.id
                data.forEach(element => {
                    if (id === element.pid) {
                        arr.push(element)
                    }
                });
            }
        })
        return arr
    }
const arr = f2(data, '小亮')
console.log(arr) //