抽奖结果数据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. Northwind 示例数据库

    Northwind 示例数据库 Northwind Traders 示例数据库包含一个名为 Northwind Traders 的虚构公司的销售数据,该公司从事世界各地的特产食品进出口贸易. 下载地址 ...

  2. [MySQL-MM] 生产环境自动恢复MM中一台M2库的过程,分享从零开始写的自动化重建脚本以及思路 (转)

    必须是MM架构,而且一台主库M1是完好无损的,一台主库M2可以根据M1主库来进行重建:如果MS架构,自己可以稍微做一下脚本修改动作,也能使用,架构如下图所示: 3  总体思路,建立主脚本a_build ...

  3. Admin.Admin/Login --- 后台项目中的管理员及登录模块

    管理员模块: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  4. svn-clearup 报错的处理(Cleanup failed to process the following paths...)

    在使用 svn 客户端执行操作失败后,执行 Clean up 操作也报错:Cleanup failed to process the following paths... ,一直不知道是什么原因.通常 ...

  5. 关于WinPE安装操作系统

    在WinPE安装操作系统,最好用虚拟光驱打开安装镜像文件,或者把镜像文件解压后直接安装. 最好不要用工具盘里所带的一键安装,复制等等功能,因为这些功能往往会安装一些其他的附带功能,不是清洁版的.

  6. “百度杯”CTF比赛 2017 二月场(Misc Web)

    爆破-1: 打开链接,是502 我直接在后面加个变量传参数:?a=1 出了一段代码 var_dump()函数中,用了$$a,可能用了超全局变量GLOBALS 给hello参数传个GLOBALS 得到f ...

  7. 基于windows平台的命令行软件安装工具Chocolatey的安装

    本文介绍Chocolatey的安装和使用 Chocolatey 这是基于.NET Framework 4以上的windows安装软件的命令行工具 安装 第一步,打开你的powershell.exe,使 ...

  8. 2015.4.25利用UIAutomation 替代API函数,解决了ListView无法读数据的难题,顺便实现了鼠标模拟滚轮

    UIAutomation比API的优点是类似于消息处理机制,而不是主要靠模拟鼠标键盘发送消息 首先添加引用UIAutomationClient和UIAutomationTypes,在安装.net3.5 ...

  9. 2015.3.12 C#运用正则表达式点滴

    Regex reg = new Regex(@"\w{1,}@\w{1,}\.(com)?(net)?"); //匹配(1个或多个)(字母或数字或下滑线)@ (1个或多个)(字母或 ...

  10. 类型:.net;问题:ASP.NET路由;结果:ASP.NET 路由 .NET Framework 4

    ASP.NET 路由 .NET Framework 4   更新:2007 年 11 月 ASP.NET 路由使您可以使用不必映射到网站中特定文件的 URL.由于 URL 不必映射到文件,所以可以在 ...