Javasript项目中前端对后台返回的数据按A-Z进行分类

2023年2月24日 593点热度 0人点赞 0条评论

分类效果：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>按A-Z进行分类</title>
  </head>
  <body>
    <div class="aa">Javasript项目中前端对后台返回的数据按A-Z进行分类</div>
    <script>
      //字母表
      let alphabet = [
        'A','B','C','D','E','F','G','H','I','J',
        'K','L','M','N','O','P','Q','R','S','T',
        'U','V','W','X','Y','Z',
      ];
      //数据
      let listData = [
        { name: 'yxlm', title: '英雄联盟' },
        { name: 'yhzt', title: '永恒之塔' },
        { name: 'dxcys', title: '地下城勇士' },
        { name: 'aezg', title: '艾尔之光' },
        { name: 'fkjyol', title: '反恐精英OL' },
        { name: 'gjqtwlb', title: '古剑奇谭网络版' },
        { name: 'mssjgjf', title: '魔兽世界国际服' },
        { name: 'lzg', title: '龙之谷' },
        { name: 'jdqs', title: '绝地求生' },
        { name: 'jz', title: '激战2' },
        { name: 'jxqys', title: '剑侠情缘三' },
        { name: 'nz', title: '逆战' },
        { name: 'ppkdc', title: '跑跑卡丁车：漂移' },
        { name: 'qqfc', title: 'QQ飞车' },
      ];
      let classList = [];

      function getClassList() {
        const arr = {};
        alphabet.forEach((letterItem) => {
          arr.letter = letterItem;
          arr.content = listData.filter((item) => {
            return item.name[0].toUpperCase() === letterItem;
          })
          if (arr.content.length !== 0) {
            classList.push(JSON.parse(JSON.stringify(arr)));
          }
          console.log(JSON.stringify(arr));
        })
      }
      //打印
      getClassList();
    </script>
  </body>
</html>

Javasript项目中前端对后台返回的数据按A-Z进行分类

文章评论