CODEWITHSUNDEEP
javascriptreactjstypescript
Shun Yamada
Shun Yamada

Reputation: 979

JS: How to filter after map

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

Upvotes: 1

Views: 84

Answers (1)

theAnubhav
theAnubhav

Reputation: 533

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>

Upvotes: 1

Related Questions