提问者:小点点

如果存在重复的JS,则不要将同一项显示两次


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

这样就有了上下文:我创建了一个API。 我显示的数据如下所示:[1]:https://I.stack.imgur.com/lj064.png

然而,我想显示日期以上的运动鞋名称(例如:2020-07-04)只一次,所以如果一个运动鞋有相同的日期,我想删除包含日期的

换句话说,我希望:

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

所以我尝试的是:实际上我知道如何从数组中删除重复数据,但在本例中我不想删除它,我只想显示它一次:)

你有什么想法吗?


共2个答案

匿名用户

假设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),或者下面是一个独立的实现