小程序开发笔记【二】，抽奖结果json数据拼装bug解决

抽奖结果数据json格式数据拼接bug，如下图，只发布了两个奖项，每个奖项设置2个奖品，但最后拼接数据的时候出现3个奖项



json数据格式如下

"luckyResult":[
            {
                "award":{
                    "lucky_award_id":60,
                    "award_name":"分别抽一个小哥哥小姐姐谈一次3天的CP",
                    "award_amount":"2"
                },
                "users":[
                    {
                        "uid":324,
                        "avatar_url":"https://wx.qlogo.cn/mmopen/vi_32/jqsfXOjzy4riaLGAJArphqtLMvRjRvV1CVTod8wgqZFOOyPquk8WzHSHeA3MhJpEjD4lXykAZS3Guq7UiavhqtUQ/132",
                        "nickname":"上天啦¿"
                    },
                    {
                        "uid":362,
                        "avatar_url":"https://wx.qlogo.cn/mmopen/vi_32/kYfZ5WLNF6VbV4eeMJppav18wKoTrTPADkQrqxbAMYu1EB6XDXwpto8BvibYRrJX7kDJePvwUqjMCfghf3nbVuA/132",
                        "nickname":"Er"
                    }
                ]
            },
...]

html页面

<div class="lucky-person-title" v-if="data.status==1">中奖者名单</div>
    <ul class="lucky-award-list">
      <li class="lucky-award-item" v-for="(luckyItem,luckyIndex) in data.luckyResult" :key="luckyIndex">
        <div class="lucky-award-name">奖品：{{luckyItem.award.award_name}}x{{luckyItem.award.award_amount}}</div>
        <ul class="award-person">
          <li class="award-person-item" v-for="(userItem,userIndex) in luckyItem.users" :key="userIndex">
            <img class="award-person-avatar" :src="userItem.avatar_url" alt="">
            <div class="award-person-nickname">{{userItem.nickname}}</div>
          </li>
        </ul>
      </li>
    </ul>

拼装js逻辑

// 获取抽奖结果
      let luckyResult = [];
      let luckyRecord = await this.LuckyService.luckyRecordList(lucky_id);
      luckyRecord.forEach((item,index) => {
        let user = { uid: item.uid,avatar_url: item.avatar_url, nickname: item.nickname };
        if (luckyResult.length>0){
          console.log('luckyResult.length', index,luckyResult.length)
          luckyResult.forEach(ele => {
            // 相同奖品，则将用户归类到一起
            if (item.lucky_award_id == ele.award.lucky_award_id) {
              ele.users.push(user);
            } else {
              let obj = { award: { lucky_award_id: item.lucky_award_id, award_name: item.award_name, award_amount: item.award_amount }, users: [user] };
              luckyResult.push(obj);
            }
          });
        }else{
          let obj = { award: { lucky_award_id: item.lucky_award_id, award_name: item.award_name, award_amount: item.award_amount }, users: [user] };
          luckyResult.push(obj);
        }
      });
      result.luckyResult = luckyResult;

问题分析：

主要问题出现在这个地方

luckyResult.forEach(ele => {
            // 相同奖品，则将用户归类到一起
            if (item.lucky_award_id == ele.award.lucky_award_id) {
              ele.users.push(user);
            } else {
              let obj = { award: { lucky_award_id: item.lucky_award_id, award_name: item.award_name, award_amount: item.award_amount }, users: [user] };
              luckyResult.push(obj);
            }
          });

在对luckyResult进行遍历的时候，当luckyResult的长度大于1的时候，遍历了两次，所以一个用户会出现两个结果

解决办法 ：

应该是先遍历每个奖项，再遍历抽奖记录列表，然后判断奖项id相等时将这个user对象push到奖项对象的users里面

// 获取抽奖结果
      let luckyResult = [];
      let luckyRecord = await this.LuckyService.luckyRecordList(lucky_id);
      if (luckyRecord.length>0){
        awards.forEach((item, index) => {
          console.log('item', item)
          let award = { award: { lucky_award_id: item.lucky_award_id, award_name: item.name, award_amount: item.amount }, users: [] }
          luckyRecord.forEach((item2, index2) => {
            if (item.lucky_award_id == item2.lucky_award_id) {
              let user = { uid: item2.uid, avatar_url: item2.avatar_url, nickname: item2.nickname }
              award.users.push(user);
            }
          })
          luckyResult.push(award);
        });
      }
      result.luckyResult = luckyResult;

抽奖结果显示正常