[英]React.js: Combining properties from an Array of Objects
I have an Array of Objects where I'm trying to combine a couple of the properties and then return a new Array of Objects.我有一个对象数组,我试图组合几个属性,然后返回一个新的对象数组。 Below is an example of the structure of the original Array of Objects:
下面是原始对象数组的结构示例:
[
{
"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": []
},
]
What I would like to do is to return a new Array of Objects that groups the data by monthYear
by combining both the month
and year
properties, for example:我想做的是返回一个新的对象数组,通过结合
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": []
},
}
}
}
]
I've been trying to flatten the Array and then restructure it but I haven't been able to work out the best approach.我一直在尝试将 Array 展平,然后对其进行重组,但我无法找到最好的方法。 I have tried
.flat()
, .flatMap()
and a few other methods but haven't had any success.我尝试
.flat()
、 .flatMap()
和其他一些方法,但没有任何成功。
I recommend to use lodash/groupBy for this.我建议为此使用lodash/groupBy 。
const formatted = _.groupBy(data, item => `${item.date.month}-${item.date.year}`);
The function will create the following structure. function 将创建以下结构。 It's a little bit different, but it groups the items according to month and 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": []
}
]
}
This should do the job:这应该做的工作:
inputData.reduce((acc, item) => {
const key = `${item.date.month}-${item.date.year}`;
const { date, ...realData } = item;
acc[key] = [...acc[key] || [], realData];
return acc;
}, {})
Explanation about the code.关于代码的解释。
const key = `${item.date.month}-${item.date.year}`
- this part creates the key of the item. const key = `${item.date.month}-${item.date.year}`
- 这部分创建项目的键。 In your case it's a composition of month-year.在您的情况下,它是月年的组成。
const { date, ...realData } = item
- here we remove the date object from the whole, as you don't need it anymore (as per your desired output) const { date, ...realData } = item
- 在这里我们从整体中删除日期 object,因为您不再需要它(根据您想要的输出)
...acc[key] || []
...acc[key] || []
- if this is the first object in the loop with that key, acc[key]
would be null, so we initialize with an empty array. ...acc[key] || []
- 如果这是循环中使用该键的第一个 object,则acc[key]
将为 null,因此我们使用空数组进行初始化。 If that's not the first key, then acc[key]
will already be an array.如果这不是第一个键,那么
acc[key]
已经是一个数组。 We then add the newly created object to that array.然后我们将新创建的 object 添加到该数组中。
Hope this is what you are after.希望这就是你所追求的。
Use Array.prototype.reduce
to group by your custom key, here's a sample使用
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.