How to filter array and push it to another array in Angular

Question

I am new to Angular. I have an array of events with multiple arguments. I want to filter them and have two new array files (upcoming events and past events). I have this code in typescript:

 arrangeEvents(){
    let datestring = this.eventList[this.index].date;
    let dateObj = new Date(datestring);
    let currentDateObj = new Date();
    if(currentDateObj > dateObj){
      upcomingEvents.push(this.eventList);
    }else{
      pastEvents.push(this.eventList);
    }
  }

This is the array file (this has multiple event values but this is just the first entry for reference:

export const events = [
    {
        eventShortName: 'IALC: How the Construction Industry Adapts to New Technologies?',
        shortDesc: 'How Is Blockchain Driving Digital Transformation',
        eventType: 'Webinar',
        eventDetailsLink: ['/event-details', 'How-the-Construction-Industry-Adapts'],
        paramLink: 'How-the-Construction-Industry-Adapts',
        title: 'Industry Academe Linkage for Construction: How the Construction Industry Adapts to New Technologies?',
        desc: 'This webinar will feature a panel discussion that revolves around the different technologies used in the construction industry in the Philippines and how CIORS could potentially be one of the new technologies to be used as a staple in the industry and academe.',
        goal: 'The aim is to share knowledge with fellow members of the construction industry and construction academe on the various technologies used in the industry and how CIORS could play a role in it.',
        date: '08/25/2021',
        time:{
            startTime: '11:30 AM',
            endTime: '01:30 PM'
        },
        eventThumbnail: '../../../../assets/img/event1.png',
        eventCover: '../../../../assets/img/event1.png',
        registerLink: '#'
    },

This is the html code:

            <div *ngFor="let event of eventList">
                <a [routerLink]="event.eventDetailsLink">
                    <div class="card border rounded shadow thumbnail"><img class="card-img-top w-100 d-block thumbnail-img" [src]="event.eventThumbnail" />
                        <div class="card-body">
                            <h6 class="card-title">{{ event.eventShortName }}</h6>
                            <div class="row g-0">
                                <div class="col-3 text-center">
                                    <span class = "month">{{ getMonth(event.date) }}</span>
                                    <br>
                                    <span class ="date"><strong>{{ getDate(event.date) }}</strong></span>
                                    <br>
                                    <span class = "year">{{ getYear(event.date) }}</span>
                                    
                                </div>
                                <div class="col">
                                    <h6 style="font-size: 14px;">{{ event.shortDesc }}</h6>
                                    <p style="font-size: 10px;">{{ event.eventType }}</p>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </a> 
            </div>

Have you tried using the array.filter() function?

Kyriazis
– Kyriazis

2022-02-22 02:17:26 +00:00
Commented Feb 22, 2022 at 2:17 — Kyriazis
– Kyriazis, Commented Feb 22, 2022 at 2:17

Geeth · Accepted Answer · 2022-02-22 02:48:47Z

2

Use filter() function as follows:

arrangeEvents(){
    let currentDateObj = new Date();
    this.upcomingEvents = this.eventList.filter(event => new Date(event.date) > currentDateObj);
    this.pastEvents = this.eventList.filter(event => new Date(event.date) <= currentDateObj);
  }

answered Feb 22, 2022 at 2:48

Geeth

5546 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

srijan lama · Accepted Answer · 2022-02-22 02:58:06Z

you can filter the events property with js filter method and store the present and past event on separate presentEvent and pastEvent Property

  public pastEvents: any;
  public presentEvents: any;
  public events : any = [
  {
     //some other data 
     date: '08/25/2021''
  },
  {
     //some other data 
     date: '08/25/2021''
  },
  ]
  // filter data on constructor 
  constructor() {
    this.pastEvents = this.events.filter((event) => {
    return new Date(event.date) < new Date();
   });
  this.presentEvents = this.events.filter((event) => {
  return new Date(event.date) >= new Date();
  });
  }

 // html output loop each past and present property
<div>
  <h3>Past Events</h3>
  <div *ngFor="let item of pastEvents">
    <p>Event title : {{ item.eventShortName }}</p>
    <p>
    <span>{{ item.date }}</span>
    </p>
   </div>
</div>
<div>
  <h3>Present Events</h3>
  <div *ngFor="let item of presentEvents">
  <p>Event title : {{ item.eventShortName }}</p>
  <p>
    <span>{{ item.date }}</span>
   </p>
 </div>

working example check the link https://stackblitz.com/edit/angular-ivy-fapnez?file=src/app/app.component.ts

Collectives™ on Stack Overflow

How to filter array and push it to another array in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related