I am working on integrating upcoming classes and past classes components into my application. I have successfully stored the schedule of classes and can retrieve them using backend services. However, I need to display only the upcoming classes in one component and the past classes in another. So far, this is what I have achieved. How can I compare the classes and filter them out from the JSON list that I receive on the frontend side?
html
<tbody>
<tr *ngFor = "let completeData of schedule">
<td class="trim">{{completeData.date | date}}</td>
<td class="trim">{{completeData.course}}</td>
<td class="trim">{{completeData.location}}</td>
<td class="trim">{{completeData.instructor}}</td>
<td class="trim"><nb-checkbox [(ngModel)]="completeData.listing"></nb-checkbox></td>
<td class="trim">
<nb-select>
<nb-option value="2">Edit</nb-option>
<nb-option value="3">Delete</nb-option>
<nb-option value="4" (click)="viewDetails()">View</nb-option>
</nb-select>
</td>
</tr>
</tbody>
component.ts file
schedule: ClassSchedule = new ClassSchedule();
ngOnInit() {
this._classService.GetClassData()
.subscribe((result: any) => {
this.schedule = result;
})
}
interface for schedule
export interface IClassSchedule {
course: string | undefined;
date: string | undefined;
hour: string | undefined;
minute: string | undefined;
timeofday: string | undefined;
totalHours: string | undefined;
//Other fields not added here
}