zoukankan      html  css  js  c++  java
  • 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);
        },
      },
    
  • 相关阅读:
    P1270 【“访问”美术馆】
    SP14932 【LCA
    NOI 题库 9272 题解
    Code[VS] 1230 题解
    20161022 NOIP模拟赛 T1 解题报告
    20161023 NOIP 模拟赛 T2 解题报告
    20161023 NOIP 模拟赛 T1 解题报告
    20161022 NOIP模拟赛 解题报告
    POJ 1979 题解
    POJ 1160 题解
  • 原文地址:https://www.cnblogs.com/Ssinoo/p/14062068.html
Copyright © 2011-2022 走看看