常见需求:列表转换成树

2020-12-14  本文已影响0人  JLong

背景:后端懒或者为了节省性能,返回列表,前端需要将列表转换成树进行渲染

相关代码:

let data = [

    {

      "id": "1",

      "moduleCode": "aaa",

      "moduleName": "",

      "pid": null

    },

        {

      "id": "2",

      "moduleCode": "bbb",

      "moduleName": "",

      "pid": "1"

    },

    {

      "id": "3",

      "moduleCode": "ccc",

      "moduleName": "",

      "pid": null

    },

    {

      "id": "4",

      "moduleCode": "ddd",

      "moduleName": "",

      "pid": "3"

    },

        {

      "id": "5",

      "moduleCode": "aaa",

      "moduleName": "",

      "pid": null

    },

]

function listToTree(data) {  // 删除 所有 children,以防止多次调用  data.forEach(function (item) {      delete item.children;  });  

// 将数据存储为 以 id 为 KEY 的 map 索引数据列  

var map = {};  

data.forEach(function (item) {      

map[item.id] = item;  

});

//        console.log(map);  

//console.log(JSON.parse(JSON.stringify(map)))  

var val = [];  

data.forEach(function (item) {      // 以当前遍历项,的pid,去map对象中找到索引的id      

var parent = map[item.pid];      

// 如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中      

if (parent) {          

(parent.children || ( parent.children = [] )).push(item);      

} else {          

//如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级         

 val.push(item);     

 }  });  

return val;}

let a = listToTree(data)

console.log(a)

上一篇 下一篇

猜你喜欢

热点阅读