JS: How to filter after map

Question

I don't want to display same format datetimes after map. Do you guys know any ideas to get rid of same YYYY- MM-DD ddd from results view here?

<Body>
  <Title>Choose Datetimes</Title>
  {eventType.availableDatetimes.map(d => (
    <styles.ListItem key={String(d)} onClick={() => onClick(d)}>
      <TouchRipple>
        <styles.StyledCard selected={Number(d) === Number(selectedDate)}>
          {d.format('YYYY-MM-DD ddd')}
        </styles.StyledCard>
      </TouchRipple>
    </styles.ListItem>
  ))}
</Body>

I want to join the group same Datetimes here. I want to change from:

2018-10-14 sun
2018-10-14 sun
2018-10-14 sun
2018-10-14 sun
2018-10-15 mon
2018-10-15 mon
2018-10-15 mon

to:

2018-10-14 sun
2018-10-15 mon

I'm not clear with the components your using, but I guess changing the format in {d.format('YYYY-MM-DD ddd')} to your required format should work — Manoj Kumar, Oct 14 '18 at 13:48
It's not that simple. Look at the underscore.js library to group functionality or make your own. — SebaKZ, Oct 14 '18 at 14:22
Possible duplicate of [How to group an array of objects by key](https://stackoverflow.com/questions/40774697/how-to-group-an-array-of-objects-by-key) — Heretic Monkey, Oct 14 '18 at 14:24

score 1 · Answer 1 · answered Oct 14 '18 at 14:22

Assuming the content Date would have different time but your logic for uniqueness is just the Date in described format,

const filterDateByUniqueDate = (dates) =>{
const resultSet = {};
return dates.filter(d =>{
   let dFormat = d.format('YYYY-MM-DD ddd');//ddd is not needed
   if(!resultSet[dFormat]){
      resultSet[dFormat] = d;
      return true;
   }
   return false;
});

}


//assuming react code but should be ok with any component based
....


render(){

....
const dateOptions = this.filterDateByUniqueDate(eventType.availableDatetimes); //us
<Body>
  <Title>Choose Datetimes</Title>
  {dateOptions.map(d => (
    <styles.ListItem key={d.toString()} onClick={() => onClick(d)}>
      <TouchRipple>
        <styles.StyledCard selected={Number(d) === Number(selectedDate)}>
          {d.format('YYYY-MM-DD ddd')}
        </styles.StyledCard>
      </TouchRipple>
    </styles.ListItem>
  ))}
</Body>

JS: How to filter after map

1 Answers1