• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

抽奖结果数据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;

抽奖结果显示正常


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序--相对路径和绝对路径发布时间:2022-07-18
下一篇:
微信小程序子组件给父组件传参,调用父组件函数发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap