您好,谢谢花时间回答我的问题。
这样就有了上下文:我创建了一个API。 我显示的数据如下所示:[1]:https://I.stack.imgur.com/lj064.png
然而,我想显示日期以上的运动鞋名称(例如:2020-07-04)只一次,所以如果一个运动鞋有相同的日期,我想删除包含日期的
换句话说,我希望:
https://i.stack.imgur.com/afixo.png
所以我尝试的是:实际上我知道如何从数组中删除重复数据,但在本例中我不想删除它,我只想显示它一次:)
你有什么想法吗?
假设API的响应如下所示:
const data = [
{
title: 'bloodline',
date: '2020-07-04'
}, {
title: 'celtics',
date: '2020-07-04'
}, {
title: 'air dior',
date: '2020-07-08'
}
];
然后,您可以使用Lodash的groupBy方法,创建如下内容:
null
const data = [
{
title: 'bloodline',
date: '2020-07-04'
}, {
title: 'celtics',
date: '2020-07-04'
}, {
title: 'air dior',
date: '2020-07-08'
}
];
const grouped = _.groupBy(data, 'date');
for (let date in grouped) {
// display date here
console.log(date);
for (let item of grouped[date]) {
// display each item title here
console.log(item.title);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
您可能想要做的是对数据进行分组,而不是筛选/删除项。
所以如果你从一个像这样的形状开始
[
{name: 'bloodline', date: '2020-07-04' },
{name: 'celtics', date: '2020-07-04' },
{name: 'air dior', date: '2020-07-08' },
{name: 'bloodline 2.0', date: '2020-07-08' },
]
你可能想把它改成
{
'2020-07-04': [
{name: 'bloodline', date: '2020-07-04' },
{name: 'celtics', date: '2020-07-04' },
],
'2020-07-08': [
{name: 'air dior', date: '2020-07-08' },
{name: 'bloodline 2.0', date: '2020-07-08' },
]
}
或者嵌套数组可能更容易在react中使用
[
{
date: '2020-07-04',
items: [
{name: 'bloodline', date: '2020-07-04' },
{name: 'celtics', date: '2020-07-04' },
],
}, {
date: '2020-07-08',
items: [
{name: 'air dior', date: '2020-07-08' },
{name: 'bloodline 2.0', date: '2020-07-08' },
]
}
]
然后映射到这些项上,只呈现对象键或外部日期
Lodash有一个可以使用的groupby
函数(https://Lodash.com/docs/#groupby),或者下面是一个独立的实现