如何城市分类

 需要引入axios的两种方法

如果只在单页面写入需要引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

第二种

如果网络不好可以进入https://unpkg.com/axios/dist/axios.min.js然后右击另存为，保存下载使用的时候引入即可

然后就需要封装一下请求  请求是异步的  记得在封装请求前面写入async和解构赋值前面写入await这样就能获取到数据，代码如下

async function fn() {
        let { data: res } = await axios.get("http://shiyansong.cn:8080/area/city?level=1")
        return res.body
    }
console.log(fn());

最后只需要我们再次封装一次对数据进行分类即可获取到地图右侧A,B,C城市分类，只需要我们对其循环进行判断即可。

async function add() {

        //定义一个空对象用来存储判断完成后的数据
        var obj = {};

        //重新请求下以上封装的请求
        let data = await fn()

        //循环遍历我们的数据
        data.forEach(item => {

            //0是下标 只截取一个就能获取市区首字母
            var name = item.short.slice(0, 1)

            //判断是否存在 存在就赋值其他类内容  不存在添加首字母
            if (obj[name]) {
                obj[name].push(item)
            } else {
                obj[name] = [item]
            }
        });
        console.log(obj);
    }
add()

以下是在浏览器看到的效果