JS处理高德地图API返回的省市区数据

最新推荐文章于 2024-09-23 17:41:40 发布

原创最新推荐文章于 2024-09-23 17:41:40 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文介绍如何通过递归处理高德地图web API返回的大量数据，仅保留关键的省市区地名，提高数据处理效率。

调用高德地图web API时返回数据太多且无用，以下处理只保留省市区地名

先请求高德API

const url = "https://restapi.amap.com/v3/config/district?keywords=&subdistrict=3&extensions=base&key=你的KEY"
axios.get(url).then((res) => {})

利用递归处理数据

const url = "https://restapi.amap.com/v3/config/district?keywords=&subdistrict=3&extensions=base&key=你的KEY"
axios.get(url).then((res) => {
      let arr = [];
      //定义递归函数
      const fun = (districts, arr) => {
        districts.forEach((item, index) => {
          arr.push({
            name: item.name,
            districts: [],
          });
          if (item.districts.length != 0) {
            fun(item.districts, arr[index].districts);
          } else {
            delete arr[index].districts;
          }
        });
      };
      
      fun(res.data.districts, arr);
      
      console.log(arr);
})