美文网首页
常见需求:列表转换成树

常见需求:列表转换成树

作者: JLong | 来源:发表于2020-12-14 19:35 被阅读0次

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

    相关代码:

    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)

    相关文章

      网友评论

          本文标题:常见需求:列表转换成树

          本文链接:https://www.haomeiwen.com/subject/qrlbgktx.html