javascript - JS嵌套array.map
问题描述
您好,我有以下数据:
data = [{due_at: '2019-09-10', yards:[{name: 'test'},{name: 'test2'}]}...]
我想迭代这个日期以产生:
events = [{start: '2019-09-10', end: '2019-09-10, title: 'test'},{start: '2019-09-10', end: '2019-09-10, title: 'test2'}...]
我尝试使用以下嵌套地图:
events = data.map(d => {
return d.yards.map(y => {
return {
start: d.due_at,
end: d.due_at,
title: y.name
};
});
});
这在一定程度上有效,但我不断返回一个嵌套数组,如下所示:
[[{start: '2019-09-10', end: '2019-09-10, title: 'test'},{start: '2019-09-10', end: '2019-09-10, title: 'test2'}...]]
如何调整我的地图代码以输出单个对象数组?
解决方案
您可以使用.flatMap()
而不是.map()
在您的外部映射函数上将内容“展平”到您的内部映射函数的结果数组中:
const data = [{
due_at: '2019-09-10',
yards: [{
name: 'test'
}, {
name: 'test2'
}]
}];
const events = data.flatMap(d => {
return d.yards.map(y => {
return {
start: d.due_at,
end: d.due_at,
title: y.name
};
});
});
console.log(events);
但是,.flatMap()
目前没有最好的浏览器支持,所以,如果你想要更多兼容浏览器的东西,你可以使用.reduce()
而不是.flatMap()
:
const data = [{
due_at: '2019-09-10',
yards: [{
name: 'test'
}, {
name: 'test2'
}]
}];
const events = data.reduce((a, {due_at: start, yards}) =>
[...a, ...yards.map(({name:title}) => ({start, end: start, title}))],
[]);
console.log(events);
推荐阅读
- hibernate - 在这个例子中,Hibernate 如何删除关系?
- node.js - 带有附件的 Node.js Gmail API 草稿不起作用
- php - 如果sql值为0,想要隐藏div php css
- r - 如何在 R 中删除 ggplot 边距
- php - 从一个控制器 Laravel PHP 对两个表进行操作的最佳实践
- python - great_expectations 和scrapy
- javascript - jquery中的目标按钮类
- ajax - 使用 Vue 和 Laravel 存储 AJAX 搜索结果
- android - 如何使用导航组件实现此导航图?
- haskell - Haskell 泛型。构建代表