js腾讯地图api获取的省市区数据如何转成三级联动的嵌套数据?

image.png

这是api请求数据
http://localhost:9528/ws/dist...
感觉完全没有规律,除了第一个数据显示的是所有的省外,其他两个数组显示的是市区,怎么把他转成这样的嵌套数据image.png

阅读 4.4k
2 个回答

是有规律的,第一个数组就是第一级(省、直辖市),第二个数组是第二级,第三个就是第三级,而判断父子节点关系可以根据等级和行政区划码,行政区划码前两位代表省,后两位代表市,再后面两位是县。

let list = [], obj = {}
data.forEach((arr, index) => {
    arr.forEach(item => {
        //let res = index == 0 ? list : obj[item.id.substr(0, index * 2)].children
        let res = index == 0 ? list : (obj[item.id.substr(0, index * 2)].children || (obj[item.id.substr(0, index * 2)].children = []));
        res.push(
            obj[item.id.substr(0, index * 2 + 2)] = {
                value: item.id,
                label: item.fullname,
                //children: []
            }
        )
    })
})
obj = null
console.log(list)

我看了下这个接口,理论上是可以生成3级结构的

代码共6位,前两位代表省(一级)、中间两位为市/地区(二级),最后两位为区县(三级)
1)省级:前两位有值,后4位置0,如,河北省:130000
2)市/地区:前4四位有值,包含省代码与市代码,最后两位置0,如河北省保定市:130600
3)区县:6位全有值,包含前4位省市代码及区县代码,河北省保定市涿州市:130681
4)直辖市、香港、澳门:同省级,在行政区划接口(ws/district/v1/list)中,其下直接为区级(没有二级结构填充)例:北京,东城区 (而非:“北京,北京,东城区”)
5)直辖县:第3、4位为90的,为省直辖县

把原始数据拿到后,把根据id遍历一遍,比如前两位相同的放一个键下,套3次就行。

const res = {
    "status": 0,
    "message": "query ok",
    "data_version": "20210329",
    "result": [
       (原始数据)
    ]
}
let tree = [];
let tempProvince = {},tempCity = {},tempArea = {};
//遍历三级
for (let area of res.result[2]) {
    let id = area.id.substr(0,4);
    tempArea[id] = tempArea[id] || [];
    tempArea[id].push({
        label:area.fullname,
        value:area.id
    });
} 

for (let city of res.result[1]) {
    let id = city.id.substr(0,2);
    tempCity[id] = tempCity[id] || [];
    tempCity[id].push({
        label:city.fullname,
        value:city.id,
        children:tempArea[city.id.substr(0,4)] || null,
    });
}
for (let province of res.result[0]) {
    let id = province.id.substr(0,2);
    tempProvince[id] = tempProvince[id] || [];
    tempProvince[id].push({
        label:province.fullname,
        value:province.id,
        children:tempCity[id] || null,
    });
}
tree = Object.values(tempProvince);
console.log(tree);
       
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题