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

常见需求:列表转换成树

作者: 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)

相关文章

  • 常见需求:列表转换成树

    背景:后端懒或者为了节省性能,返回列表,前端需要将列表转换成树进行渲染 相关代码: letdata=[{"id":...

  • Week 25 0904--0910

    question 1 将升序的列表转换成二叉搜索树(BST) 答案: question 2:将整数转换成16进制数...

  • flutter ListView的基本使用

    基本List 显示数据列表是移动应用程序常见的需求。Flutter包含的 ListView Widget,使列表...

  • JavaScript实现列表转换成树

    开发树形组件时,需要树结构的数据来填充,如果此时服务器返回的是列表,那就需要我们自己来转换成树。本篇介绍了两种转换...

  • Python的setdefault 与 defaultdict

    提出需求 有这样的需求,一个列表,里面是(key, value) 这样的键值对元组,要将它转换成一个字典对象,并将...

  • css补课:理解 :last-of-type

    背景: 实现UI需求如图: 列表项均为a标签并以虚线分割, “查看更多” 为实线; 这种还是挺常见的,就列表项都是...

  • 4:索引(上)

    索引就是目录,是用来提供查询效率的。 最常见的三种索引 哈希树 有序数组 搜索树 哈希树:key转换成hash值(...

  • python中的列表与数组转换

    将列表转换成数组或者数组转换成列表,操作如下(使用函数array 和 tolist): from numpy im...

  • 【Vue】 绑定Class与Style && 条件渲染

    操作元素的class列表和内联样式Style是数据绑定的常见需求,通过 v-bind绑定Class列表与内联样式S...

  • List操作

    List:列表操作 一、列表解析 二、二维List转换成一维List 三、列表排序 四、一维List转换成二维Li...

网友评论

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

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