目录
- 需求
- 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));