最近在做项目时需要将后端返回的城市数据做一些格式化的处理，再进行渲染，在此将自己思路与方法分享出来，仅供参考！
- 格式化要求：按首字母分类、加上热门城市，效果图如下
- 后端返回的数据格式如下：
//所有城市
data1:[
{ label: '北京', value: 'AREA|1', pinyin: 'beijing', short: 'bj' },
{ label: '宝鸡', value: 'AREA|5', pinyin: 'baoji', short: 'bj' },
{ label: '安庆', value: 'AREA|2', pinyin: 'anqing', short: 'aq' },
{ label: '南宁', value: 'AREA|3', pinyin: 'nanning', short: 'nn' },
{ label: '长沙', value: 'AREA|4', pinyin: 'changsha', short: 'cs' },
{ label: '上海', value: 'AREA|6', pinyin: 'shanghai', short: 'sh' },
{ label: '广州', value: 'AREA|7', pinyin: 'guangzhou', short: 'gz' }
]
// 热门城市
hot:[
{ label: '北京', value: 'AREA|1', pinyin: 'beijing', short: 'bj' },
{ label: '上海', value: 'AREA|6', pinyin: 'shanghai', short: 'sh' },
{ label: '广州', value: 'AREA|7', pinyin: 'guangzhou', short: 'gz' }
]
- 我需要处理成的格式：
data2:{
a:[
{ label: '安庆', value: 'AREA|2', pinyin: 'anqing', short: 'aq' }
],
b:[
{ label: '北京', value: 'AREA|1', pinyin: 'beijing', short: 'bj' },
{ label: '宝鸡', value: 'AREA|5', pinyin: 'baoji', short: 'bj' },
],
c:[
{ label: '长沙', value: 'AREA|4', pinyin: 'changsha', short: 'cs' },
]
}
此外，还需要一个所有字母组成的数组，用来单独渲染右侧城市索引列表，同时点击右侧城市索引字母时，找到data2中该字母key对应的数组：
arr:[a,b,c,d,....]
- 处理方法：
//格式化数据的方法
function FnFormater(aList) {
// 定义一个空对象，用来放
//a:[{ label: '安庆', value: 'AREA|2', pinyin: 'anqing', short: 'aq' }]这种键值对,
let oCityData = {}
//遍历返回的数组
aList.forEach(item => {
//把数组中元素属于哪个字母先切出来
let sLetter = item.short.substr(0, 1)
//判断oCityData对象中有没有该字母对应的键值对
if (sLetter in oCityData) {
//如果有，就把数组中的元素，push到该字母对应的键值对中
oCityData[sLetter].push(item)
} else {
//如果没有，就创建一个该字母对应的键值对
oCityData[sLetter]=[item]
}
})
//Object.keys是取出对象中所有的keys,组成一个数组
//比如：let obj={a:1,b:2,c:3},则Object.keys(obj)返回：["a","b","c"]
//把所有key组成一个数组并排序
let aCityKey=Object.keys(oCityData).sort()
//返回一个对象
return { oCityData:oCityData,aCityKey:aCityKey }
}
// 调用方法，传入需格式化的所有城市数据，拿值的时候可以采用解构赋值的方法
let {oCityData,aCityKey}=FnFormater(data1)
console.log(oCityData)
/*{"b": [
{ "label": "北京", "value": "AREA|1", "pinyin": "beijing","short": "bj"},
{ "label": "宝鸡","value": "AREA|5", "pinyin": "baoji","short": "bj"}
],
"a": [
{"label": "安庆","value": "AREA|2","pinyin": "anqing","short": "aq"}
]
...
}
*/
console.log(aCityKey)
//["a", "b", "c", "g", "n", "s"]
// 在原来的基础上加上热门城市
oCityData['hot']=hot
//把hot加到aCityKey的最前面
aCityKey.unshift('hot')
