JS 递归处理行政区域树结构

需求:

将接口返回的行政区域树转换成如下结构

const rawCitiesData = [
  {
    text: '遂昌县',
    value: 1,
    children: [
      {
         text: '妙高街道',
         value: 2,
         children: [...]
      }
    ]
  }
]

原数据:

{
    "code": 200,
    "msg": "成功",
    "data": [
        {
            "id": 1,
            "areaName": "遂昌县",
            "areaCode": "001",
            "parentId": 0,
            "parentName": "",
            "parentCode": "",
            "areaLevel": 2,
            "areaPlace": "",
            "areaPeople": null,
            "totalArea": null,
            "orderNo": 1,
            "note": "",
            "children": [
                {
                    "id": 2,
                    "areaName": "妙高街道",
                    "areaCode": "001001",
                    "parentId": 1,
                    "parentName": "",
                    "parentCode": "",
                    "areaLevel": 3,
                    "areaPlace": "",
                    "areaPeople": null,
                    "totalArea": null,
                    "orderNo": 1,
                    "note": "",
                    "children": [
                        {
                            "id": 47,
                            "areaName": "叶坦社区",
                            "areaCode": "001001007",
                            "parentId": 2,
                            "parentName": "",
                            "parentCode": "",
                            "areaLevel": 4,
                            "areaPlace": "",
                            "areaPeople": null,
                            "totalArea": null,
                            "orderNo": 0,
                            "note": "",
                            "children": [],
                            "disabled": false
                        },
                        {
                            "id": 50,
                            "areaName": "东峰村",
                            "areaCode": "001001201",
                            "parentId": 2,
                            "parentName": "",
                            "parentCode": "",
                            "areaLevel": 4,
                            "areaPlace": "",
                            "areaPeople": null,
                            "totalArea": null,
                            "orderNo": 0,
                            "note": "",
                            "children": [],
                            "disabled": false
                        },
                        {
                            "id": 75,
                            "areaName": "七山头村",
                            "areaCode": "001001226",
                            "parentId": 2,
                            "parentName": "",
                            "parentCode": "",
                            "areaLevel": 4,
                            "areaPlace": "",
                            "areaPeople": null,
                            "totalArea": null,
                            "orderNo": 0,
                            "note": "",
                            "children": [],
                            "disabled": false
                        }
                    ],
                    "disabled": false
                }
            ],
            "disabled": false
        }
    ]
}

实现:

/**
  * 处理行政区域数据
  * @param {Array} source 数据源
  * @return {Array}
*/
_proceesCitiesData(source) {
  const dispose = (data) => {
      let arr = []
      let obj = {}
      data.forEach(item => {
	if (item.children.length) {
	  item.children = dispose(item.children)
	}
						
	obj = {
	  value: item.id,
	  text: item.areaName,
	  children: item.children
	}					
	arr.push(obj)
      })
	return arr
      }
      return dispose(source)
 }

转换后的结果:

[
    {
        "value": 1,
        "text": "遂昌县",
        "children": [
            {
                "value": 2,
                "text": "妙高街道",
                "children": [
                    {
                        "value": 47,
                        "text": "叶坦社区",
                        "children": []
                    },
                    {
                        "value": 50,
                        "text": "东峰村",
                        "children": []
                    },
                    {
                        "value": 75,
                        "text": "七山头村",
                        "children": []
                    }
                ]
            }
        ]
    }
]
posted @   小小紫苏  阅读(463)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示