JavaScript 一维数组转树形结构 算法函数

由于业务中经常要用到一维数组转树形结构的函数特此记录下

我们经常从服务器中拿到如下的一维数组

var nodes = [
  {"id":1,"pId":0,"name":"父节点1 - 展开","open":true},
  {"id":11,"pId":1,"name":"父节点11 - 折叠"},
  {"id":12,"pId":1,"name":"父节点12 - 折叠"},
  {"id":13,"pId":1,"name":"父节点13 - 没有子节点"},
  {"id":2,"pId":0,"name":"父节点2 - 折叠"},
  {"id":21,"pId":2,"name":"父节点21 - 展开","open":true},
  {"id":22,"pId":2,"name":"父节点22 - 折叠"},
  {"id":23,"pId":2,"name":"父节点23 - 折叠"},
  {"id":3,"pId":0,"name":"父节点3 - 没有子节点"}
];

但是在业务上我们想要的是树形文档结构的数组树

如下

var tree = [
  {
    "id": 1,
    "pId": 0,
    "name": "父节点1 - 展开",
    "open": true,
    "children": [
      {
        "id": 11,
        "pId": 1,
        "name": "父节点11 - 折叠"
      },
      {
        "id": 12,
        "pId": 1,
        "name": "父节点12 - 折叠"
      },
      {
        "id": 13,
        "pId": 1,
        "name": "父节点13 - 没有子节点"
      }
    ]
  },
  {
    "id": 2,
    "pId": 0,
    "name": "父节点2 - 折叠",
    "children": [
      {
        "id": 21,
        "pId": 2,
        "name": "父节点21 - 展开",
        "open": true
      },
      {
        "id": 22,
        "pId": 2,
        "name": "父节点22 - 折叠"
      },
      {
        "id": 23,
        "pId": 2,
        "name": "父节点23 - 折叠"
      }
    ]
  },
  {
    "id": 3,
    "pId": 0,
    "name": "父节点3 - 没有子节点"
  }
]

1.使用递归方式将 nodes --> tree

function getTree(data, root, idTxt, pidTxt, pushTxt) {
    var idTxt = idTxt || 'id';
    var pidTxt = pidTxt || 'pid';
    var pushTxt = pushTxt || 'children';
    // 递归方法
    function getNode(id) {
      var node = []
      for (var i = 0; i < data.length; i++) {
        if (data[i][pidTxt] == id) {
          data[i][pushTxt] = getNode(data[i][idTxt])
          node.push(data[i])
        }
      }
      if (node.length == 0) {
        return
      } else {
        return node
      }
    }
    // 使用根节点
    return getNode(root)
  }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,409评论 25 709
  • 1.把二元查找树转变成排序的双向链表 题目: 输入一棵二元查找树,将该二元查找树转换成一个排序的双向链表。 要求不...
    曲终人散Li阅读 3,469评论 0 19
  • 背景 一年多以前我在知乎上答了有关LeetCode的问题, 分享了一些自己做题目的经验。 张土汪:刷leetcod...
    土汪阅读 12,857评论 0 33
  • 今天下午上完两节课以后就是我们的校本课了,这次是第二次上校本课,我还是去的毛笔社团今天毛笔社团以还是没有学...
    王昱凯阅读 223评论 0 0
  • 今天和老爸去看了家附近新开的楼盘,万科.紫院。该项目最小户型147平方米,均价在13000左右。听完售楼人员对项目...
    betteryaya阅读 940评论 0 0

友情链接更多精彩内容