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": []
}
]
}
]
}
]
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类