json遍历成树结构 - 递归

最新推荐文章于 2025-11-15 14:21:51 发布

原创最新推荐文章于 2025-11-15 14:21:51 发布 · 693 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#递归算法 #树结构 #json

vue/cli 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何通过递归方法将JSON数据转换为树形结构，详细阐述了过程并提供了具体的实现步骤，最终展示了转换后的输出结果。

1、json数据:

  created () {
	let testData = [
            {
                "id": 10001,
                "name": "华南地区",
                "serial_no": "HNDQ01",
                "parent_id": 0,
                "level": 0
            },
            {
                "id": 10002,
                "name": "广州地区",
                "serial_no": "GZDQ01",
                "parent_id": 10001,
                "level": 1
            },
            {
                "id": 10005,
                "name": "东莞地区",
                "serial_no": "DGDQ01",
                "parent_id": 10001,
                "level": 1
            },
            {
                "id": 10003,
                "name": "义乌地区",
                "serial_no": "YWDQ01",
                "parent_id": 0,
                "level": 0
            },
            {
                "id": 10004,
                "name": "南昌地区",
                "serial_no": "NCDQ01",
                "parent_id": 0,
                "level": 0
            }
        ]

	let treeData = this.getTree(0, testData) // 调用, 0 代表从父节点id为0开始

	console.log( treeData )

   },

method: {
   getTree ( id, array ) { // 获取客户分类的树结构
    let samelevel = this.getSameLevel( id, array ) // 获取同级数组
    if ( samelevel.length > 0 ) {
      samelevel.forEach( item => {
        item.children = this.getTree(item.id, array)
      })
    }
    return samelevel
   },

   getSameLevel ( id, array ) { // 获取同级数组,id: 当前父级id，也就是要找子节点的parent_id == id, array： 原数组
    let newArray = []
    array.forEach( item => {
      if ( item.parent_id == id ) {
        newArray.push(item)
      }
    })
    return newArray
   },
    
}

3、输出结果：