将普通数据处理成树结构数据

明乐er

已于 2022-05-26 18:25:42 修改

阅读量400

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-05-26 18:15:08 首次发布

原创栏目不可以用于商业盈利，其他皆可使用

本文链接：https://blog.csdn.net/qq_35021522/article/details/124989817

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、核心代码

  /**
   * @description: 递归将普通数据（可以有关系，也可以无关系）处理成树结构
   * nodeList: 普通节点数据列表
   * cNode: 当前节点
   * params: 格式化的字段
   * params.id: 当前节点对应的节点id
   * params.pId: 当前节点对应的父节点id
   * params.name: 当前节点对应的节点名称
   * params.pName: 当前节点对应的对应的父节点名称
   */
  function recursionTreeData(
    nodeList = [],
    cNode,
    params = { id: 'id', pId: 'pId', name: 'name', pName: 'pName' },
  ) {
    let temp = [].concat(nodeList)
    if (cNode) {
      for (let i = 0; i < temp.length; i++) {
        if (cNode.id === temp[i][params.pId]) {
          let opt = {
            id: temp[i][params.id],
            pId: temp[i][params.pId],
            name: temp[i][params.name],
            pName: temp[i][params.pName],
            children: [],
          }

          temp.splice(i, 1)
          i--

          opt.children = recursionTreeData(temp, opt)

          cNode.children.push(opt)
        }
      }

      return cNode.children
    } else {
      let treeData = []

      for (let i = 0; i < temp.length; i++) {
        if (!temp[i][params.pId] || temp[i][params.pId] < 0) {
          let opt = {
            id: temp[i][params.id],
            pId: temp[i][params.pId],
            name: temp[i][params.name],
            pName: temp[i][params.pName],
            children: [],
          }

          temp.splice(i, 1)
          i--

          opt.children = recursionTreeData(temp, opt)
          treeData.push(opt)
        }
      }
      return treeData
    }
  }

二、示例代码

  let arr = [
    {
      id: 610,
      pId: null,
      name: '陕西省',
      pName: null,
    },
    {
      id: 610100000000,
      pId: 610,
      name: '西安市',
      pName: '陕西省',
    },
    {
      id: 610200000000,
      pId: 610,
      name: '铜川市',
      pName: '陕西省',
    },
    {
      id: 610300000000,
      pId: 610,
      name: '宝鸡市',
      pName: '陕西省',
    },
    {
      id: 110100000000,
      pId: null,
      name: '北京市',
      pName: null,
    },
    {
      id: 110101000000,
      pId: 110100000000,
      name: '东城区',
      pName: '北京市',
    },
    {
      id: 110102000000,
      pId: 110100000000,
      name: '西城区',
      pName: '北京市',
    },
  ]

  console.log(recursionTreeData(arr))

三、示例结果

[
    {
        "id": 610,
        "pId": null,
        "name": "陕西省",
        "pName": null,
        "children": [
            {
                "id": 610100000000,
                "pId": 610,
                "name": "西安市",
                "pName": "陕西省",
                "children": []
            },
            {
                "id": 610200000000,
                "pId": 610,
                "name": "铜川市",
                "pName": "陕西省",
                "children": []
            },
            {
                "id": 610300000000,
                "pId": 610,
                "name": "宝鸡市",
                "pName": "陕西省",
                "children": []
            }
        ]
    },
    {
        "id": 110100000000,
        "pId": null,
        "name": "北京市",
        "pName": null,
        "children": [
            {
                "id": 110101000000,
                "pId": 110100000000,
                "name": "东城区",
                "pName": "北京市",
                "children": []
            },
            {
                "id": 110102000000,
                "pId": 110100000000,
                "name": "西城区",
                "pName": "北京市",
                "children": []
            }
        ]
    }
]