如果有重复的JS，不要重复显示相同的项目

Question

您好，感谢您花时间回答我的问题。

所以有上下文：我创建了一个 API。 我这样显示数据： [1]：https ://i.stack.imgur.com/lJ064.png

不过，我只想在运动鞋名称上方显示日期（例如：2020-07-04）所以如果运动鞋有相同的日期，我想删除包含日期的

换句话说，我想拥有这个：

https://i.stack.imgur.com/aFiXO.png

所以我尝试了：实际上我知道如何从数组中删除重复数据，但在这种情况下不想删除它，我只想显示一次:)

你有什么思路吗？

Answer 1

您可能想要做的是将数据分组而不是过滤/删除项目。所以如果你从一个形状开始[  {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' },  ]}或者嵌套数组可能更容易在反应中使用[  {    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' },    ]  }]然后您将映射项目并仅渲染对象键或外部dateLodash 有一个groupBy你可以使用的函数（https://lodash.com/docs/#groupBy），或者这里是一个独立的实现

Answer 2

假设您的 API 的响应是这样的：const data = [&nbsp; {&nbsp; &nbsp; title: 'bloodline',&nbsp; &nbsp; date: '2020-07-04'&nbsp; }, {&nbsp; &nbsp; title: 'celtics',&nbsp; &nbsp; date: '2020-07-04'&nbsp; }, {&nbsp; &nbsp; title: 'air dior',&nbsp; &nbsp; date: '2020-07-08'&nbsp; }];然后你可以使用LoDash 的 groupBy方法并做这样的事情：const data = [&nbsp; {&nbsp; &nbsp; title: 'bloodline',&nbsp; &nbsp; date: '2020-07-04'&nbsp; }, {&nbsp; &nbsp; title: 'celtics',&nbsp; &nbsp; date: '2020-07-04'&nbsp; }, {&nbsp; &nbsp; title: 'air dior',&nbsp; &nbsp; date: '2020-07-08'&nbsp; }];const grouped = _.groupBy(data, 'date');for (let date in grouped) {&nbsp; // display date here&nbsp; console.log(date);&nbsp;&nbsp;&nbsp; for (let item of grouped[date]) {&nbsp; &nbsp; // display each item title here&nbsp; &nbsp; console.log(item.title);&nbsp; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>注意：由于您没有提供任何源代码，很可能您需要根据您的用例调整此代码段，但这可能是解决它的起点。