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

抽奖结果显示正常

小程序开发笔记【二】,抽奖结果json数据拼装bug解决的更多相关文章

  1. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  2. WordPress版微信小程序开发系列(二):安装使用问答

    自WordPress版微信小程序发布开源以来,受关注的程度超过我原来的想象.这套程序主要面对的用户是wordpress网站的站长,如果wordpress站想在微信的生态圈得到推广,小程序成为一种重要的 ...

  3. 微信小程序开发(二)----- 云开发

    1.概念 微信小程序的云开发是腾讯云与微信团队深度合作推出的一个全新的小程序的解决方案,它提供了云函数.云数据库与云存储这三大基础能力支持,随着云开发的出现,小程序的开发者可以将服务端的部署和运营的环 ...

  4. 微信小程序开发笔记(一)

    一.为什么要学习微信小程序开发 微信小程序是一个可以在微信上打开的轻应用,他是由多个页面组成的程序,跟传统APP比较如下: 优点 1.不需要在应用商店下载,不占用内存空间,即开即用 2.可以在微信内直 ...

  5. 微信小程序开发(二)认识开发工具

    腾讯微信团队提供非常优秀的微信小程序开发工具,大大降低了开发者的入门门槛,为他们点赞!上一篇文章已经说明了,如何注册及下载开发工具,现在我们就来一起认识见识一下开发工具的庐山真面目. 首次打开这个开发 ...

  6. 微信小程序开发系列二:微信小程序的视图设计

    大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...

  7. 微信小程序开发笔记02

    今天学习了微信小程序开发用到的语言,wxml与wxss语言基本语法与html和css基本语法相似,学习起来相对简单.在小程序主要的语言是js(javascript,跟准确的说是jqery) ,由于这种 ...

  8. 微信小程序开发笔记01

    微信小程序开发的优势 1,不用安装,即开即用,用完就走.省流量,省安装时间,不占用桌面: 2,体验上虽然没法完全媲美原生APP,但综合考虑还是更优: 3,对于小程序拥有者来说,开发成本更低,他们可以更 ...

  9. [转]微信小程序开发(二)图片上传+服务端接收

    本文转自:http://blog.csdn.net/sk719887916/article/details/54312573 文/YXJ 地址:http://blog.csdn.net/sk71988 ...

随机推荐

  1. walle代码发布系统配置

    walle Walle 一个web部署系统工具,配置简单.功能完善.界面流畅.开箱即用! 支持git.svn版本管理,支持各种web代码发布, PHP,Python,JAVA等代码的发布.回滚,可以通 ...

  2. JDBC小常识

    1 JDBC连接数据库6步 Load the JDBC Driver Establish the Database Connection Create a Statement Object Execu ...

  3. flask之instance_path实例路径

    Flask 0.8 introduces instance folders. Flask for a long time made it possible to refer to paths rela ...

  4. LeetCode第二题:Add Two Numbers

    You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...

  5. 除了IE浏览器能识别之外,其他浏览器都不能识别的html写法

    最近写html页面的时候发现顶部边界margin-top用了定位之后,IE的跟其他浏览器不同,所以用到了把IE跟其他浏览器区分开来的写法 <!--[if !IE]> <div cla ...

  6. GWT嵌入纯HTML页面

    众所周知,gwt页面是java代码所写,不存在html页面直接作用于gwt面板中.不过gwt也倒是提供了一些可用的功能,比如frame,这个是UI中的一个,内部可以设置URL,但是经过我测试后发现,这 ...

  7. ORACLE显式授权

    同一数据库 两个不同用户 user1 user2 user1里面有一张表 table1 在user2里面创建synonymcreate synonym sy1 for user1.table1; 创建 ...

  8. Hanoi双塔问题(递推)

    Hanoi双塔问题 时间限制: 1 Sec  内存限制: 128 MB提交: 10  解决: 4[提交][状态][讨论版][命题人:外部导入] 题目描述 给定A,B,C三根足够长的细柱,在A柱上放有2 ...

  9. Oracle RMAN 学习:演练进阶篇

    Oracle RMAN 学习:演练进阶篇 5 Rman备份演练进阶篇 5.1 是否选择增量备份 Backup命令生成的备份集中只备份了那些使用了的数据块,备份集实际大小已经较目标数据库的数据文件小了很 ...

  10. 怎样在win7中 安装Tomcat7.0

    Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器. 我们可以到官方网站下载Tomcat7 工具/原料 win7 Tomcat7.0 方法/步骤 1 在官网下载软件: ...