在做一個題目選項的功能時,遇到這個合并的問題,題目有單選和多選,單選沒問題,每題就一個答案,多選就會出現(xiàn)多個答案。選擇結(jié)果類似下圖:
我需要把同一個多選題的數(shù)據(jù)合并成一個,就是圖中藍色框選部分的對象合并為一個,option變成"捏,擠",其他的Id不用管。有什么簡單的方法實現(xiàn)。跪謝!
一個基本思路,先把數(shù)據(jù)遍歷一遍,相同問題的題目存為一個數(shù)組,然后遍歷處理相同題目的數(shù)組,將答案拼接即可。
示例:
數(shù)據(jù):
var questions = [{
id: Math.random() * 100000 >> 0,
option: 'x',
questionId: 1,
title: '你的名字'
}, {
id: Math.random() * 100000 >> 0,
option: '動作1',
questionId: 2,
title: '你喜歡的動作'
}, {
id: Math.random() * 100000 >> 0,
option: '動作2',
questionId: 2,
title: '你喜歡的動作'
}, {
id: Math.random() * 100000 >> 0,
option: '動作3',
questionId: 2,
title: '你喜歡的動作'
}, {
id: Math.random() * 100000 >> 0,
option: '動作4',
questionId: 2,
title: '你喜歡的動作'
}, {
id: Math.random() * 100000 >> 0,
option: '動作5',
questionId: 2,
title: '你喜歡的動作'
}, {
id: Math.random() * 100000 >> 0,
option: '歌曲1',
questionId: 3,
title: '你喜歡的歌曲'
}, {
id: Math.random() * 100000 >> 0,
option: '歌曲2',
questionId: 3,
title: '你喜歡的歌曲'
}, {
id: Math.random() * 100000 >> 0,
option: '歌曲3',
questionId: 3,
title: '你喜歡的歌曲'
}];
// 給相同題目分類
// 給相同題目分類
var categories = {};
questions.forEach(function (item, i) {
if (!categories[item.questionId]) {
categories[item.questionId] = [item];
} else {
categories[item.questionId].push(item);
}
});
console.log(JSON.stringify(categories, 0, 2));
// {
// "1": [
// {
// "id": 76350,
// "option": "x",
// "questionId": 1,
// "title": "你的名字"
// }
// ],
// "2": [
// {
// "id": 42682,
// "option": "動作1",
// "questionId": 2,
// "title": "你喜歡的動作"
// },
// {
// "id": 19378,
// "option": "動作2",
// "questionId": 2,
// "title": "你喜歡的動作"
// },
// {
// "id": 25613,
// "option": "動作3",
// "questionId": 2,
// "title": "你喜歡的動作"
// },
// {
// "id": 25020,
// "option": "動作4",
// "questionId": 2,
// "title": "你喜歡的動作"
// },
// {
// "id": 70897,
// "option": "動作5",
// "questionId": 2,
// "title": "你喜歡的動作"
// }
// ],
// "3": [
// {
// "id": 38775,
// "option": "歌曲1",
// "questionId": 3,
// "title": "你喜歡的歌曲"
// },
// {
// "id": 50039,
// "option": "歌曲2",
// "questionId": 3,
// "title": "你喜歡的歌曲"
// },
// {
// "id": 71712,
// "option": "歌曲3",
// "questionId": 3,
// "title": "你喜歡的歌曲"
// }
// ]
// }
對相同類型的題目進行遍歷,后面的都放到第一個里面即可。
并重新按照原格式存放
// 用于按照原格式存放最后的數(shù)據(jù)
var data =[];
for (var key in categories) {
var i, l;
if (categories.hasOwnProperty(key)) {
for (i = 1; i < categories[key].length; ++i) {
// 第一個的值 = ',' + 下一個的值
categories[key][0].option += ',' + categories[key][i].option;
// 刪除下一個
categories[key].splice(i, 1);
--i;
}
data.push(categories[key][0]);
}
}
console.log('categories',JSON.stringify(categories, null, 2));
console.log('data',JSON.stringify(data, null, 2));
// 'categories' {
// "1": [
// {
// "id": 72749,
// "option": "x",
// "questionId": 1,
// "title": "你的名字"
// }
// ],
// "2": [
// {
// "id": 33498,
// "option": "動作1,動作2,動作3,動作4,動作5",
// "questionId": 2,
// "title": "你喜歡的動作"
// }
// ],
// "3": [
// {
// "id": 79801,
// "option": "歌曲1,歌曲2,歌曲3",
// "questionId": 3,
// "title": "你喜歡的歌曲"
// }
// ]
// }
// 'data' [
// {
// "id": 72749,
// "option": "x",
// "questionId": 1,
// "title": "你的名字"
// },
// {
// "id": 33498,
// "option": "動作1,動作2,動作3,動作4,動作5",
// "questionId": 2,
// "title": "你喜歡的動作"
// },
// {
// "id": 79801,
// "option": "歌曲1,歌曲2,歌曲3",
// "questionId": 3,
// "title": "你喜歡的歌曲"
// }
// ]
看了2樓的回答,其實之前的過程可以簡化,不過確實如3樓所言,和ES6的map沒有什么關(guān)系。我用了ES5的forEach
。不用ES5,只用ES3,換成普通for循環(huán)完全沒有問題的。使用map反而負復雜了。
由于不需要分類的題目數(shù)據(jù),所以可以直接拼接答案,不用先歸類了,實現(xiàn)如下:
var data2 = {};
questions.forEach(function (item, i) {
if (!data2[item.questionId]) {
data2[item.questionId] = item;
} else {
data2[item.questionId].option += ',' + item.option;
}
});
console.log(JSON.stringify(data2,null,2));
// {
// "1": {
// "id": 60348,
// "option": "x",
// "questionId": 1,
// "title": "你的名字"
// },
// "2": {
// "id": 33956,
// "option": "動作1,動作2,動作3,動作4,動作5",
// "questionId": 2,
// "title": "你喜歡的動作"
// },
// "3": {
// "id": 48194,
// "option": "歌曲1,歌曲2,歌曲3",
// "questionId": 3,
// "title": "你喜歡的歌曲"
// }
// }
這樣出來的data2
是一個對象的形式,如果需要數(shù)組,再處理即可。
還是要贊同三樓的一點。即使是多選題,原數(shù)據(jù)也不該是你所列的那種組織方式。直接在統(tǒng)計多選題已選答案時就處理好,不是更好的方式嗎?
提供一個好玩的思路,能實現(xiàn),但不一定適用于真實場景;
定義一個空對象,循環(huán)遍歷數(shù)組,然后空對象的屬性名為 title對應(yīng)的值也就是題目; 值為一個數(shù)組,把選項push進去,當然這在每一道題中可能還會涉及到去重的問題,最后的結(jié)果大概類似這樣
obj['動作'] = ['抓','捏'];
如果可以用es6的話推薦Map
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號