I'm working on a subpage that contains a large amount of detailed data in the form of thousands of records. I want to filter this data based on the "id" from my route, which is also included in the dataset. However, I've run into some difficulties while attempting this. I've tried various methods, starting from using ngIf and going through the .filter function, but all attempts have resulted in errors. The specific error message being:
Cannot read property 'filter' of undefined.
component.ts
export class ZawPgee2020Component implements OnInit {
zawpl: Array<any>;
zawplfiltered: Array<any>;
rider: Rider;
detailrider: DetailRider;
constructor(private _speedwayService: SpeedwayService, private orderPipe: OrderPipe, private route: ActivatedRoute) {
this._speedwayService.getZawpl()
.subscribe(response => {
this.zawpl = orderPipe.transform(response, "ZAWODNIK");
});
}
getFilterData() {
const zawplfiltered = this.zawpl.filter(zawpl => {
return zawpl == this.rider.id;
});
}
}
service.ts
getRider(id) : Observable<any> {
return this._http
.get<any>("http://node.gurustats.usermd.net:60519/pgee2020")
.pipe(
map(result => result.data.filter(p=> p.id == id)[0])
);
}
getZawpl() {
return this._http
.get("http://node.gurustats.usermd.net:60519/zawpl")
.pipe(
map(res => res ['data']))
}
component.html
<tr *ngFor="let detailrider of zawplfiltered | orderBy: order:reverse; let i = index">
<td>{{ detailrider.ZAWODNIK }}</td>
</tr>