鸿蒙处理城市选择JSON数据，封装，保留二级城市

一.背景

需要做一个城市选择的页面，根据字母跳到当前行，城市数据来源为后端给的一个json文件，但是这个数据源范围在县级，现在需要剔除多余数据，保留项目所用数据，然后需要换成鸿蒙ListItemGroup所需数据格式，现在进行一个数据处理

二.代码实现

这就是经过以下代码处理过的数据格式，只保留二级

不想做处理的，开头会有处理过的json文件，直接拿着使用也可，或者下面代码会贴直接复制也行

ps:这个下载好像需要会员，就再贴一下json代码吧

//数据格式
  interface cityType{
  id:number
  name:string
  parent_id:number
  is_hot:number
  children:Array<cityTypeCh>
}
// 使用 flatMap 提取所需属性并扁平化数据  这里只保留id和name并进行排序
      const childrenArray = city.data.areas.flatMap((item: cityType) =>
      item.children.map((item2: cityTypeCh):cityTypeCh => ({
        name: item2.name,
        id: item2.id,
      }))
      ).sort((a, b) => a.name.localeCompare(b.name, 'zh')); // 按照 name 属性排序
      const groupedData: Array<cc> = [];
    // 重新组合数据
      childrenArray.forEach(item => {
          // pinyin4js这是一个三方库 汉字转拼音排序  ｜toLowerCase转小写，｜toUpperCase转大写
          const firstLetter: string = pinyin4js.convertToPinyinString(item.name[0], '', pinyin4js.FIRST_LETTER).toUpperCase(); // 获取名称的首字母
          // 查找或创建对应字母的组
          let group = groupedData.find(g => g.title === firstLetter) || { title: firstLetter, value: [] };
          group.value.push(item);
          // 如果 group 是新创建的，则将其添加到 groupedData 中
          if (!groupedData.includes(group)) {
            groupedData.push(group);
          }
      });
      groupedData.sort((a, b) => a.title.localeCompare(b.title, 'zh'));
  console.info(JSON.stringify(groupedData))

三.处理过的数据：

[
  {
    "title": "A",
    "value": [{
      "name": "阿坝",
      "id": 324
    }, {
      "name": "阿克苏",
      "id": 352
    }, {
      "name": "阿拉尔",
      "id": 353
    }, {
      "name": "阿拉善盟",
      "id": 259
    }, {
      "name": "阿里",
      "id": 345
    }, {
      "name": "安康",
      "id": 312
    }, {
      "name": "安庆",
      "id": 36
    }, {
      "name": "安顺",
      "id": 112
    }, {
      "name": "安阳",
      "id": 152
    }, {
      "name": "鞍山",
      "id": 246
    }, {
      "name": "澳门",
      "id": 396
    }]
  },
  {
    "title": "B",
    "value": [{
      "name": "巴彦淖尔盟",
      "id": 260
    }, {
      "name": "巴音郭楞",
      "id": 354
    }, {
      "name": "巴中",
      "id": 325
    }, {
      "name": "白城",
      "id": 213
    }, {
      "name": "白沙",
      "id": 122
    }, {
      "name": "白山",
      "id": 214
    }, {
      "name": "白银",
      "id": 63
    }, {
      "name": "百色",
      "id": 99
    }, {
      "name": "蚌埠",
      "id": 37
    }, {
      "name": "包头",
      "id": 261
    }, {
      "name": "宝鸡",
      "id": 313
    }, {
      "name": "保定",
      "id": 139
    }, {
      "name": "保山",
      "id": 371
    }, {
      "name": "保亭",
      "id": 123
    }, {
      "name": "北海",
      "id": 100
    }, {
      "name": "北京",
      "id": 52
    }, {
      "name": "本溪",
      "id": 247
    }, {
      "name": "毕节",
      "id": 113
    }, {
      "name": "滨州",
      "id": 285
    }, {
      "name": "亳州",
      "id": 51
    }, {
      "name": "博尔塔拉",
      "id": 355
    }]
  },
  {
    "title": "C",
    "value": [{
      "name": "沧州",
      "id": 140
    }, {
      "name": "昌都",
      "id": 346
    }, {
      "name": "昌吉",
      "id": 356
    }, {
      "name": "昌江",
      "id": 124
    }, {
      "name": "常德",
      "id": 199
    }, {
      "name": "常州",
      "id": 223
    }, {
      "name": "长春",
      "id": 211
    }, {
      "name": "长沙",
      "id": 197
    }, {
      "name": "巢湖",
      "id": 38
    }, {
      "name": "朝阳",
      "id": 248
    }, {
      "name": "潮州",
      "id": 78
    }, {
      "name": "郴州",
      "id": 200
    }, {
      "name": "成都",
      "id": 322
    }, {
      "name": "承德",
      "id": 141
    }, {
      "name": "澄迈县",
      "id": 125
    }, {
      "name": "池州",
      "id": 39
    }, {
      "name": "赤峰",
      "id": 262
    }, {
      "name": "崇左",
      "id": 101
    }, {
      "name": "滁州",
      "id": 40
    }, {
      "name": "楚雄",
      "id": 372
    }, {
      "name": "长治",
      "id": 301
    }]
  },
  {
  "title": "D",
  "value": [{
    "name": "达州",
    "id": 326
  }, {
    "name": "大理",
    "id": 373
  }, {
    "name": "大连",
    "id": 245
  }, {
    "name": "大庆",
    "id": 168
  }, {
    "name": "大同",
    "id": 302
  }, {
    "name": "大兴安岭",
    "id": 169
  }, {
    "name": "丹东",
    "id": 249
  }, {
    "name": "儋州",
    "id": 137
  }, {
    "name": "德宏",
    "id": 374
  }, {
    "name": "德阳",
    "id": 327
  }, {
    "name": "德州",
    "id": 286
  }, {
    "name": "迪庆",
    "id": 375
  }, {
    "name": "定安县",
    "id": 126
  }, {
    "name": "定西",
    "id": 64
  }, {
    "name": "东方",
    "id": 127
  }, {
    "name": "东莞",
    "id": 79
  }, {
    "name": "东营",
    "id": 287
  }]
},
  {
  "title": "E",
  "value": [{
    "name": "鄂尔多斯",
    "id": 263
  }, {
    "name": "鄂州",
    "id": 182
  }, {
    "name": "恩施",
    "id": 196
  }]
},
  {
    "title": "F",
    "value": [{
      "name": "防城港",
      "id": 102
    }, {
      "name": "佛山",
      "id": 80
    }, {
      "name": "福州",
      "id": 53
    }, {
      "name": "抚顺",
      "id": 250
    }, {
      "name": "抚州",
      "id": 234
    }, {
      "name": "阜新",
      "id": 251
    }, {
      "name": "阜阳",
      "id": 41
    }]
  },
  {
  "title": "J",
  "value": [{
    "name": "鸡西",
    "id": 172
  }, {
    "name": "吉安",
    "id": 236
  }, {
    "name": "吉林",
    "id": 212
  }, {
    "name": "济南",
    "id": 283
  }, {
    "name": "济宁",
    "id": 289
  }, {
    "name": "济源",
    "id": 154
  }, {
    "name": "佳木斯",
    "id": 173
  }, {
    "name": "嘉兴",
    "id": 385
  }, {
    "name": "嘉峪关",
    "id": 66
  }, {
    "name": "江门",
    "id": 83
  }, {
    "name": "焦作",
    "id": 155
  }, {
    "name": "揭阳",
    "id": 84
  }, {
    "name": "金昌",
    "id": 67
  }, {
    "name": "金华",
    "id": 386
  }, {
    "name": "锦州",
    "id": 253
  }, {
    "name": "晋城",
    "id": 303
  }, {
    "name": "晋中",
    "id": 304
  }, {
    "name": "荆门",
    "id": 185
  }, {
    "name": "荆州",
    "id": 186
  }, {
    "name": "景德镇",
    "id": 237
  }, {
    "name": "九江",
    "id": 238
  }, {
    "name": "酒泉",
    "id": 68
  }]
},
  {
    "title": "K",
    "value": [{
      "name": "喀什",
      "id": 359
    }, {
      "name": "开封",
      "id": 151
    }, {
      "name": "克拉玛依",
      "id": 360
    }, {
      "name": "克孜勒苏",
      "id": 361
    }, {
      "name": "昆明",
      "id": 367
    }]
  },
  {
  "title": "L",
  "value": [{
    "name": "拉萨",
    "id": 344
  }, {
    "name": "来宾",
    "id": 106
  }, {
    "name": "莱芜",
    "id": 290
  }, {
    "name": "兰州",
    "id": 62
  }, {
    "name": "廊坊",
    "id": 144
  }, {
    "name": "乐东",
    "id": 128
  }, {
    "name": "乐山",
    "id": 331
  }, {
    "name": "丽江",
    "id": 370
  }, {
    "name": "丽水",
    "id": 387
  }, {
    "name": "连云港",
    "id": 225
  }, {
    "name": "凉山",
    "id": 332
  }, {
    "name": "辽阳",
    "id": 254
  }, {
    "name": "辽源",
    "id": 215
  }, {
    "name": "聊城",
    "id": 291
  }, {
    "name": "林芝",
    "id": 347
  }, {
    "name": "临沧",
    "id": 377
  }, {
    "name": "临汾",
    "id": 305
  }, {
    "name": "临高县",
    "id": 129
  }, {
    "name": "临夏",
    "id": 69
  }, {
    "name": "临沂",
    "id": 292
  }, {
    "name": "陵水",
    "id": 130
  }, {
    "name": "柳州",
    "id": 107
  }, {
    "name": "六安",
    "id": 45
  }, {
    "name": "六盘水",
    "id": 114
  }, {
    "name": "龙岩",
    "id": 54
  }, {
    "name": "陇南",
    "id": 70
  }, {
    "name": "娄底",
    "id": 203
  }, {
    "name": "泸州",
    "id": 342
  }, {
    "name": "吕梁",
    "id": 306
  }, {
    "name": "洛阳",
    "id": 150
  }, {
    "name": "漯河",
    "id": 165
  }]
},
  {
  "title": "M",
  "value": [{
    "name": "马鞍山",
    "id": 46
  }, {
    "name": "茂名",
    "id": 85
  }, {
    "name": "眉山",
    "id": 333
  }, {
    "name": "梅州",
    "id": 86
  }, {
    "name": "绵阳",
    "id": 323
  }, {
    "name": "牡丹江",
    "id": 174
  }]
},
  {
    "title": "N",
    "value": [{
      "name": "那曲",
      "id": 348
    }, {
      "name": "南昌",
      "id": 233
    }, {
      "name": "南充",
      "id": 334
    }, {
      "name": "南京",
      "id": 220
    }, {
      "name": "南宁",
      "id": 97
    }, {
      "name": "南平",
      "id": 55
    }, {
      "name": "南通",
      "id": 226
    }, {
      "name": "南阳",
      "id": 156
    }, {
      "name": "内江",
      "id": 335
    }, {
      "name": "宁波",
      "id": 388
    }, {
      "name": "宁德",
      "id": 56
    }, {
      "name": "怒江",
      "id": 368
    }]
  },
  {
  "title": "P",
  "value": [{
    "name": "攀枝花",
    "id": 336
  }, {
    "name": "盘锦",
    "id": 255
  }, {
    "name": "平顶山",
    "id": 157
  }, {
    "name": "平凉",
    "id": 71
  }, {
    "name": "萍乡",
    "id": 239
  }, {
    "name": "莆田",
    "id": 57
  }, {
    "name": "濮阳",
    "id": 166
  }, {
    "name": "普洱",
    "id": 369
  }]
},
  {
  "title": "Q",
  "value": [{
    "name": "七台河",
    "id": 175
  }, {
    "name": "齐齐哈尔",
    "id": 176
  }, {
    "name": "潜江",
    "id": 187
  }, {
    "name": "黔东南",
    "id": 115
  }, {
    "name": "黔南",
    "id": 116
  }, {
    "name": "黔西南",
    "id": 117
  }, {
    "name": "钦州",
    "id": 108
  }, {
    "name": "秦皇岛",
    "id": 145
  }, {
    "name": "青岛",
    "id": 284
  }, {
    "name": "清远",
    "id": 87
  }, {
    "name": "庆阳",
    "id": 72
  }, {
    "name": "琼海",
    "id": 131
  }, {
    "name": "琼中",
    "id": 132
  }, {
    "name": "曲靖",
    "id": 378
  }, {
    "name": "衢州",
    "id": 393
  }, {
    "name": "泉州",
    "id": 58
  }]
},
  {
  "title": "R",
  "value": [{
    "name": "日喀则",
    "id": 349
  }, {
    "name": "日照",
    "id": 293
  }]
},
  {
    "title": "S",
    "value": [{
      "name": "三门峡",
      "id": 158
    }, {
      "name": "三明",
      "id": 59
    }, {
      "name": "三亚",
      "id": 121
    }, {
      "name": "厦门",
      "id": 60
    }, {
      "name": "山南",
      "id": 350
    }, {
      "name": "汕头",
      "id": 88
    }, {
      "name": "汕尾",
      "id": 89
    }, {
      "name": "商洛",
      "id": 315
    }, {
      "name": "商丘",
      "id": 159
    }, {
      "name": "上海",
      "id": 321
    }, {
      "name": "上饶",
      "id": 240
    }, {
      "name": "韶关",
      "id": 90
    }, {
      "name": "邵阳",
      "id": 204
    }, {
      "name": "绍兴",
      "id": 389
    }, {
      "name": "深圳",
      "id": 77
    }, {
      "name": "神农架林区",
      "id": 188
    }, {
      "name": "沈阳",
      "id": 244
    }, {
      "name": "十堰",
      "id": 189
    }, {
      "name": "石河子",
      "id": 362
    }, {
      "name": "石家庄",
      "id": 138
    }, {
      "name": "石嘴山",
      "id": 272
    }, {
      "name": "双鸭山",
      "id": 177
    }, {
      "name": "朔州",
      "id": 307
    }, {
      "name": "四平",
      "id": 216
    }, {
      "name": "松原",
      "id": 217
    }, {
      "name": "苏州",
      "id": 221
    }, {
      "name": "宿迁",
      "id": 227
    }, {
      "name": "宿州",
      "id": 47
    }, {
      "name": "绥化",
      "id": 178
    }, {
      "name": "随州",
      "id": 190
    }, {
      "name": "遂宁",
      "id": 337
    }]
  },
  {
  "title": "T",
  "value": [{
    "name": "台湾",
    "id": 397
  }, {
    "name": "台州",
    "id": 390
  }, {
    "name": "太原",
    "id": 300
  }, {
    "name": "泰安",
    "id": 294
  }, {
    "name": "泰州",
    "id": 228
  }, {
    "name": "唐山",
    "id": 146
  }, {
    "name": "天津",
    "id": 343
  }, {
    "name": "天门",
    "id": 191
  }, {
    "name": "天水",
    "id": 73
  }, {
    "name": "铁岭",
    "id": 256
  }, {
    "name": "通化",
    "id": 218
  }, {
    "name": "通辽",
    "id": 265
  }, {
    "name": "铜川",
    "id": 316
  }, {
    "name": "铜陵",
    "id": 48
  }, {
    "name": "铜仁",
    "id": 118
  }, {
    "name": "图木舒克",
    "id": 363
  }, {
    "name": "吐鲁番",
    "id": 364
  }, {
    "name": "屯昌县",
    "id": 133
  }]
},
  {
    "title": "X",
    "value": [{
      "name": "西安",
      "id": 311
    }, {
      "name": "西宁",
      "id": 275
    }, {
      "name": "西双版纳",
      "id": 380
    }, {
      "name": "锡林郭勒盟",
      "id": 268
    }, {
      "name": "仙桃",
      "id": 181
    }, {
      "name": "咸宁",
      "id": 192
    }, {
      "name": "咸阳",
      "id": 318
    }, {
      "name": "香港",
      "id": 395
    }, {
      "name": "湘潭",
      "id": 205
    }, {
      "name": "湘西",
      "id": 206
    }, {
      "name": "襄樊",
      "id": 193
    }, {
      "name": "孝感",
      "id": 194
    }, {
      "name": "忻州",
      "id": 308
    }, {
      "name": "新乡",
      "id": 160
    }, {
      "name": "新余",
      "id": 241
    }, {
      "name": "信阳",
      "id": 161
    }, {
      "name": "邢台",
      "id": 147
    }, {
      "name": "兴安盟",
      "id": 269
    }, {
      "name": "徐州",
      "id": 229
    }, {
      "name": "许昌",
      "id": 162
    }, {
      "name": "宣城",
      "id": 50
    }]
  },
  {
  "title": "Y",
  "value": [{
    "name": "雅安",
    "id": 338
  }, {
    "name": "烟台",
    "id": 297
  }, {
    "name": "延安",
    "id": 319
  }, {
    "name": "延边",
    "id": 219
  }, {
    "name": "盐城",
    "id": 230
  }, {
    "name": "扬州",
    "id": 231
  }, {
    "name": "阳江",
    "id": 91
  }, {
    "name": "阳泉",
    "id": 309
  }, {
    "name": "伊春",
    "id": 179
  }, {
    "name": "伊犁",
    "id": 366
  }, {
    "name": "宜宾",
    "id": 339
  }, {
    "name": "宜昌",
    "id": 195
  }, {
    "name": "宜春",
    "id": 242
  }, {
    "name": "益阳",
    "id": 207
  }, {
    "name": "银川",
    "id": 270
  }, {
    "name": "鹰潭",
    "id": 243
  }, {
    "name": "营口",
    "id": 257
  }, {
    "name": "永州",
    "id": 208
  }, {
    "name": "榆林",
    "id": 320
  }, {
    "name": "玉林",
    "id": 110
  }, {
    "name": "玉树",
    "id": 282
  }, {
    "name": "玉溪",
    "id": 381
  }, {
    "name": "岳阳",
    "id": 209
  }, {
    "name": "云浮",
    "id": 92
  }, {
    "name": "运城",
    "id": 310
  }]
},
  {
  "title": "Z",
  "value": [{
    "name": "重庆",
    "id": 394
  }, {
    "name": "枣庄",
    "id": 298
  }, {
    "name": "湛江",
    "id": 93
  }, {
    "name": "张家界",
    "id": 198
  }, {
    "name": "张家口",
    "id": 148
  }, {
    "name": "张掖",
    "id": 75
  }, {
    "name": "漳州",
    "id": 61
  }, {
    "name": "昭通",
    "id": 382
  }, {
    "name": "肇庆",
    "id": 94
  }, {
    "name": "镇江",
    "id": 232
  }, {
    "name": "郑州",
    "id": 149
  }, {
    "name": "中山",
    "id": 95
  }, {
    "name": "中卫",
    "id": 274
  }, {
    "name": "舟山",
    "id": 392
  }, {
    "name": "周口",
    "id": 163
  }, {
    "name": "株洲",
    "id": 210
  }, {
    "name": "珠海",
    "id": 96
  }, {
    "name": "驻马店",
    "id": 164
  }, {
    "name": "资阳",
    "id": 340
  }, {
    "name": "淄博",
    "id": 299
  }, {
    "name": "自贡",
    "id": 341
  }, {
    "name": "遵义",
    "id": 119
  }]
}
]