• 如何将一个列表封装为一个树形结构


    后台将一个树状结构的数据,返回成了一个列表;

    如何将这个列表封装为树形结构呢?

    <script>
        var data = [{
            "area_id": 5,
            "name": "广东省",
            "parent_id": 0,
          },
          {
            "area_id": 6,
            "name": "广州市",
            "parent_id": 5,
          },
          {
            "area_id": 7,
            "name": "深圳市",
            "parent_id": 5,
          },
          {
            "area_id": 4,
            "name": "北京市",
            "parent_id": 3,
          },
          {
            "area_id": 3,
            "name": "北京",
            "parent_id": 0,
          },
        ]
    
        function setTreeData(arr) {
          // 删除所有的children,以防止多次调用
          arr.forEach(function (item) {
            delete item.children
          });
          let map = {}; //构建map
          arr.forEach(i => {
            map[i.area_id] = i; //构建以area_id为键 当前数据为值
          });
          let treeData = [];
          arr.forEach(child => {
            const mapItem = map[child.parent_id]; //判断当前数据的parent_id是否存在map中
            if (mapItem) { //存在则表示当前数据不是最顶层的数据
              //注意: 这里的map中的数据是引用了arr的它的指向还是arr,当mapItem改变时arr也会改变,踩坑点
              (mapItem.children || (mapItem.children = [])).push(child); //这里判断mapItem中是否存在child
            } else { //不存在则是顶层数据
              treeData.push(child)
            }
          })
          return treeData
        }
        console.log(setTreeData(data))
  • 相关阅读:
    Luogu P2181 对角线 简单数学,细节
    vscode 配置C、C++环境,编写运行C、C++(转)
    用家庭电脑架设minecraft服务器
    用阿里云架设我的世界(minecraft)服务器
    在线数独
    数学物理笔记
    复活的asdf1229
    test
    GitHub从小白到精通(第一章 初识)
    抛砖引玉,浅讲Handler和线程的关系
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/14154519.html
Copyright © 2020-2023  润新知