抽奖结果数据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;
抽奖结果显示正常
|
请发表评论