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

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 ><img  [src]="event.eventThumbnail" />
                        <div >
                            <h6 >{{ event.eventShortName }}</h6>
                            <div >
                                <div >
                                    <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 >
                                    <h6 style="font-size: 14px;">{{ event.shortDesc }}</h6>
                                    <p style="font-size: 10px;">{{ event.eventType }}</p>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </a> 
            </div>

CodePudding user response：

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);
  }

CodePudding user response：

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