js操作对象存对象-对象存数组-数据操作,实现对城市数据进行存放操作实现排列顺序

137 阅读1分钟

对象存对象-对象存数组-数据操作

废话不多说先看效果图↓

image.png

未操作之前的数据↓

image.png

思路:

首先请求接口数据

封装函数

创建空对象

循环遍历数据

对接口数据的地区首字母进行截取

判断对象中有没有截取的数据如果没有就添加

否则就将剩下的多余数据复值给当前数组中的对象

请求接口:
http://shiyansong.cn:8080/area/city?level=1
代码:
   async function ix() {
            // 请求的数据接口
            let { data: res } = await axios.get('http://shiyansong.cn:8080/area/city?level=1')
            // console.log(res);
            return res.body
        }
        async function fn() {
            let arr = await ix()
            let obj = {}
            arr.forEach(res => {//循环必须用forEach 不然下标操作不了
                let cd = res.short.slice(0, 1) //slcie截取第一个 splice split 不能用
                // console.log(cd);//截取后的数据
                // 判断obj对象中有没有cd这条数据
                if (obj[cd]) {//(obj[cd]);//此时的cd 是这一条为空 此时查的是obj肯定是空
                    //如果没有就在这条截取的下标基础上增加当前截取的下标属性的总数据
                    obj[cd].push(res)//
                } else {
                    // 因为单个首字母的数据不一定就一条,如果有多条就将多条的同时放进来
                    obj[cd] = [res]
                }
            })
            // console.log(obj);
        }
        fn()

思路图

微信截图_20221112131852.png