提高wordpress网站,高端网站建设上海,网站 功能呢,城乡建设和住房建设官网目录 需求1.首先寻找类似需求的数据2.对数据进行转换3.将转换后的数据转为json文件4.完整代码 需求 需求#xff1a;在做项目时#xff0c;遇到了需要制作地址列表的功能#xff0c;这一般都会用到一些开源的组件库#xff0c;但是有个问题是不同组件库之间的城市列表数据结… 目录 需求1.首先寻找类似需求的数据2.对数据进行转换3.将转换后的数据转为json文件4.完整代码 需求 需求在做项目时遇到了需要制作地址列表的功能这一般都会用到一些开源的组件库但是有个问题是不同组件库之间的城市列表数据结构不一样虽然可以找到很多的城市列表的数据但是都不一定是我们想要的所以最好就是对已有数据结构进行转换转换成我们需要的结构然后单独放在一个文件中(毕竟城市列表数据也比较多)。 1.首先寻找类似需求的数据
比如这种)
list: [{letter: A,data: [{name: 阿巴嘎旗,city_pinyin: abagaqi,city_id: 152522,py: abgq,},{name: 阿坝县,city_pinyin: abaxian,city_id: 513231,py: abx,},......],},{letter: B,data: [{name: 八步区,city_pinyin: babuqu,city_id: 451102,py: bbq,},{name: 巴楚县,city_pinyin: bachuxian,city_id: 653130,py: bcx,},......],},......]但是我们需要的是这种结构的数据
{A: [{ areaId: 152522, areaName: 阿巴嘎旗 },{ areaId: 513231, areaName: 阿坝县 },.....],B: [{ areaId: 451102, areaName: 八步区 },{ areaId: 653130, areaName: 巴楚县 },......],......
}2.对数据进行转换 具体需要什么样的数据格式看你的需求。 let cityTransList {};
// list为上面所说的类似数据
list.map((item) {let value [];item.data.map((item) {let oneCity {};oneCity.areaId item.city_id;oneCity.areaName item.name;value.push(oneCity);});cityTransList[item.letter] value;
});3.将转换后的数据转为json文件
function exportJson(name, data) {let blob new Blob([data]);let link document.createElement(a);link.href URL.createObjectURL(blob);link.download name; // 下载的文件名link.click();
}exportJson(cityList.json, JSON.stringify(cityTransList));4.完整代码 以下代码直接引入html中。 // 准备数据
const similarData [...]// 转换数据
let cityTransList {};
list.map((item) {let value [];item.data.map((item) {let oneCity {};oneCity.areaId item.city_id;oneCity.areaName item.name;value.push(oneCity);});cityTransList[item.letter] value;
});// 另存为文件
function exportJson(name, data) {let blob new Blob([data]);let link document.createElement(a);link.href URL.createObjectURL(blob);link.download name; // 下载的文件名link.click();
}exportJson(cityList.json, JSON.stringify(cityTransList));
