JS 案例,将数据改造

一般后端请求来的数据,需要转换为自己需要的格式 城市列表案例

目的:为了搭建城市列表查询

原因:因为后端传来的数据,不能直接拿来使用,需要自己用js改造数据格式

  • 下图是请求到数据

image-20201130154950523

  • 目标转为:

image-20201130162258362

1.先创建26个字母,通过ASCII值

const letterArr = [];
      for (let code = 97; code < 123; code++) {
        letterArr.push(String.fromCharCode(code));
      }

2.根据每个对象的拼音首字母进行过滤

const list = cities.filter((item) => item.pinyin.substring(0, 1) === letter);

filter过滤器,传入自己,加入条件进行过滤

3.遍历自己,将一个字母与之对应

letterArr.forEach((letter) => {
        const list = cities.filter(
          (item) => item.pinyin.substring(0, 1) === letter);
          // console.log(list);
      });

4.最后创建新数组,将有数据的数组加入,并创建需要的格式类型

methods: {
    handleCityData(cities) {
      const newcitylist = [];
      const letterArr = [];
      for (let code = 97; code < 123; code++) {
        letterArr.push(String.fromCharCode(code));
      }
      // console.log(letterArr);
      letterArr.forEach((letter) => {
        const list = cities.filter(
          (item) => item.pinyin.substring(0, 1) === letter);
          // console.log(list);
          if(list.length>0){
            newcitylist.push({
              type:letter,
              list:list
            })
          }
      });
      console.log(newcitylist);
    },
  },
原文地址:https://www.cnblogs.com/Ssinoo/p/14062068.html