React.js:组合对象数组中的属性

Question

我有一个对象数组，我试图在其中组合几个属性，然后返回一个新的对象数组。以下是原始对象阵列的结构示例：

[
{
"memID": "180",
"memType": "Movie",
"date": {
"month": 5,
"year": 1980
},
"favourite": null,
"public": null,
"music": [],
"movie": [
{
"poster": "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
}
],
"tvshow": [],
"game": []
},
{
"memID": "65",
"memType": "Game",
"date": {
"month": 5,
"year": 1980
},
"favourite": null,
"public": null,
"music": [],
"movie": [],
"tvshow": [],
"game": [
{
"boxArt": "https://images.igdb.com/igdb/image/upload/t_1080p/co1hvj.jpg"
}
]
},
{
"memID": "178",
"memType": "Movie",
"date": {
"month": 5,
"year": 1980
},
"favourite": null,
"public": null,
"music": [],
"movie": [
{
"poster": "https://image.tmdb.org/t/p/original//5xcXvTErivIgRchsaw9qaT3NflE.jpg"
}
],
"tvshow": [],
"game": []
},
]

我想做的是返回一个新的对象数组，该数组通过组合month和year属性来按monthYear对数据进行分组，例如：

[
{
"monthYear": {
"5-1980": {
{
"memID": "180",
"memType": "Movie",
"favourite": null,
"public": null,
"music": [],
"movie": [
{
"poster": "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
}
],
"tvshow": [],
"game": []
},
{
"memID": "65",
"memType": "Game",
"favourite": null,
"public": null,
"music": [],
"movie": [],
"tvshow": [],
"game": [
{
"boxArt": "https://images.igdb.com/igdb/image/upload/t_1080p/co1hvj.jpg"
}
]
},
{
"memID": "178",
"memType": "Movie",
"favourite": null,
"public": null,
"music": [],
"movie": [
{
"poster": "https://image.tmdb.org/t/p/original//5xcXvTErivIgRchsaw9qaT3NflE.jpg"
}
],
"tvshow": [],
"game": []
},
}
}
}
]

我一直在尝试压平数组，然后对其进行重组，但我一直没能找到最好的方法。我尝试过.flat()、.flatMap()和其他一些方法，但都没有成功。

Answer 1

我建议使用lodash/groupBy。

const formatted = _.groupBy(data, item => `${item.date.month}-${item.date.year}`);

该函数将创建以下结构。它有点不同，但它根据月份和年份对项目进行分组

{
"5-1980": [
{
"memID": "180",
"memType": "Movie",
"date": {
"month": 5,
"year": 1980
},
"favourite": null,
"public": null,
"music": [],
"movie": [
{
"poster": "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
}
],
"tvshow": [],
"game": []
},
{
"memID": "65",
"memType": "Game",
"date": {
"month": 5,
"year": 1980
},
"favourite": null,
"public": null,
"music": [],
"movie": [],
"tvshow": [],
"game": [
{
"boxArt": "https://images.igdb.com/igdb/image/upload/t_1080p/co1hvj.jpg"
}
]
},
{
"memID": "178",
"memType": "Movie",
"date": {
"month": 5,
"year": 1980
},
"favourite": null,
"public": null,
"music": [],
"movie": [
{
"poster": "https://image.tmdb.org/t/p/original//5xcXvTErivIgRchsaw9qaT3NflE.jpg"
}
],
"tvshow": [],
"game": []
}
]
}

Answer 2

这应该完成任务：

inputData.reduce((acc, item) => {
const key = `${item.date.month}-${item.date.year}`;
const { date, ...realData } = item;
acc[key] = [...acc[key] || [], realData];
return acc;
}, {})

有关代码的说明。

const key = `${item.date.month}-${item.date.year}`-此部分创建项目的密钥。在你的情况下，这是一个月-年的组成部分。

const { date, ...realData } = item-这里我们从整体中删除日期对象，因为您不再需要它(根据您想要的输出(

...acc[key] || []-如果这是循环中第一个具有该键的对象，则acc[key]将为null，因此我们使用空数组进行初始化。如果这不是第一个键，那么acc[key]将已经是一个数组。然后，我们将新创建的对象添加到该数组中。

希望这就是你想要的。

Answer 3

使用Array.prototype.reduce按自定义密钥分组，下面是示例

const data = [{
"memID": "180",
"memType": "Movie",
"date": {
"month": 5,
"year": 1980
},
"favourite": null,
"public": null,
"music": [],
"movie": [{
"poster": "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
}],
"tvshow": [],
"game": []
},
{
"memID": "65",
"memType": "Game",
"date": {
"month": 5,
"year": 1980
},
"favourite": null,
"public": null,
"music": [],
"movie": [],
"tvshow": [],
"game": [{
"boxArt": "https://images.igdb.com/igdb/image/upload/t_1080p/co1hvj.jpg"
}]
},
{
"memID": "178",
"memType": "Movie",
"date": {
"month": 5,
"year": 1980
},
"favourite": null,
"public": null,
"music": [],
"movie": [{
"poster": "https://image.tmdb.org/t/p/original//5xcXvTErivIgRchsaw9qaT3NflE.jpg"
}],
"tvshow": [],
"game": []
},
];
const groupedData = data.reduce((acc, curr) => {
const { month, year } = curr.date;
const k = `${month}-${year}`;
acc[k] = (acc[k] || []).concat(curr);
return acc;
}, Object.create(null));
const results = [{
monthYear: groupedData
}];
console.log(results);