[英]React/ES6 reduce object
我有以下用于特定日期锻炼的对象:
{
"2019-03-02": [
{
"id": 1,
"workout_day": "2019-03-02",
"title": "Swimming",
"description": "",
"completed": true,
"points": 5
},
{
"id": 2,
"workout_day": "2019-03-02",
"title": "Running",
"description": "",
"completed": false,
"points": 0
},
{
"id": 3,
"workout_day": "2019-03-02",
"title": "Rowing",
"description": "",
"completed": true,
"points": 3
},
],
"2019-03-05": [...]
}
我想获得一个新对象,该对象每天显示有多少锻炼,已经完成了多少锻炼以及总分,如下所示:
{
"2019-03-02": {
"workouts": 3,
"workouts_completed": 2,
"total_points": 8
},
"2019-03-05: {...}
}
但是,此刻我完全被困住了。 感谢帮助!
这会将您的数据缩减为您想要转换为的数据
const data = { '2019-03-02': [{ id: 1, workout_day: '2019-03-02', title: 'Swimming', description: '', completed: true, points: 5 }, { id: 2, workout_day: '2019-03-02', title: 'Running', description: '', completed: false, points: 0 }, { id: 3, workout_day: '2019-03-02', title: 'Rowing', description: '', completed: true, points: 3 } ], '2019-03-03': [{ id: 1, workout_day: '2019-03-02', title: 'Swimming', description: '', completed: true, points: 7 }, { id: 2, workout_day: '2019-03-02', title: 'Running', description: '', completed: false, points: 0 }, { id: 3, workout_day: '2019-03-02', title: 'Rowing', description: '', completed: false, points: 3 } ] } const reducedData = Object.keys(data).reduce((acc, key) => { acc[key] = { workouts: data[key].length, workouts_completed: data[key].reduce((acc, item) => { if (item.completed) return acc + 1 return acc }, 0), total_points: data[key].reduce((acc, item) => { return acc + item.points }, 0) } return acc }, {}) console.log(reducedData)
您有多种解决方案可以实现此目的。 这是结合Object.entries
+ Array.reduce
。
Object.entries(input).reduce((acc, [date, workouts]) => {
const completed = workouts.filter(workout => workout.completed);
return {
...acc,
[date]: {
workouts: workouts.length,
workouts_completed: completed.length,
total_points: completed.reduce((acc, workout) => acc + workout.points, 0),
}
};
}, {});
请注意,并非所有主要浏览器都提供Object.entries
。
这样就可以了。
我使用了Array.prototype.reduce
和默认值的解构。
var data = { "2019-03-02": [{ "id": 1, "workout_day": "2019-03-02", "title": "Swimming", "description": "", "completed": true, "points": 5 }, { "id": 2, "workout_day": "2019-03-02", "title": "Running", "description": "", "completed": false, "points": 0 }, { "id": 3, "workout_day": "2019-03-02", "title": "Rowing", "description": "", "completed": true, "points": 3 }, ], "2019-03-05": [{ "id": 1, "workout_day": "2019-03-02", "title": "Swimming", "description": "", "completed": false, "points": 0 }, { "id": 2, "workout_day": "2019-03-02", "title": "Running", "description": "", "completed": false, "points": 0 }, { "id": 3, "workout_day": "2019-03-02", "title": "Rowing", "description": "", "completed": true, "points": 8 }, ] }; var result = {}; for (let key in data) { result[key] = data[key].reduce(({ workouts = 0, workouts_completed = 0, total_points = 0 }, currentValue) => { return { workouts: workouts + 1, workouts_completed: currentValue.completed ? workouts_completed + 1 : workouts_completed, total_points: total_points + currentValue.points }; }, {}); } console.log(result);
假设您的对象在一个名为json
的对象中拥有特定日期的锻炼,则可以使用Object.keys()
遍历所有键。 然后,您可以对此进行map
并一次获取特定一天的锻炼。 然后,您可以使用它每天创建一个对象。 要计算诸如totalPoints
类的totalPoints
您将使用reduce
求和。
Object.keys(json).map(key => {
return {
[key]: {
workoutsCompleted: json[key].length,
totalPoints: json[key].reduce((accum, workout) => accum + workout.points, 0)
}
};
});
const result = {};
for(const [workout_day, entries] of Object.entries(input)) {
result[workout_day] = {
workouts: entries.length,
workouts_completed: entries.reduce((acc, e) => acc + e.completed, 0),
total_points: entries.reduce((acc, e) => acc + e.points, 0),
};
}
Object.entries
对于映射对象非常有用。
const data = {
"2019-03-02": [
{
"id": 1,
"workout_day": "2019-03-02",
"title": "Swimming",
"description": "",
"completed": true,
"points": 5
},
{
"id": 2,
"workout_day": "2019-03-02",
"title": "Running",
"description": "",
"completed": false,
"points": 0
},
{
"id": 3,
"workout_day": "2019-03-02",
"title": "Rowing",
"description": "",
"completed": true,
"points": 3
},
],
"2019-03-05": []
};
function makeReport (report, workout) {
return {
workouts: report.workouts + 1,
workouts_completed: workout.completed ? report.workouts_completed + 1 : report.workouts_completed,
total_points: report.total_points + workout.points
};
}
const out = Object.entries(data).reduce(function (report, [date, workouts]) {
return {
...report,
[date]: workouts.reduce(makeReport, { workouts: 0, workouts_completed: 0, total_points: 0 })
};
}, {});
console.log(out);
哪个日志:
{ '2019-03-02': { workouts: 3, workouts_completed: 2, total_points: 8 },
'2019-03-05': { workouts: 0, workouts_completed: 0, total_points: 0 } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.