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": []
}
]
}
]
}
]
浙公网安备 33010602011771号