Is there a way to effectively filter an array Observable in Angular? I am working with an observable Array:
announcementList$: Observable<Announcement[]> = this.announcementService.getAnnouncement(0,0).pipe(filter(Boolean),shareReplay(), map(({data}) => data));
Upon receiving a response from the server, the array looks like this:
{
"id": 109,
"title": "Title 231231242342342342342342342",
"body": "testing",
"id_creator": 1,
"creator_login": "landrynek",
"created_at": "2020-04-08 13:58:45",
"updated_at": "2020-04-08 14:48:24",
"status": 1,
"accepted_at": null,
"deleted_at": null
},
{
"id": 110,
"title": "Title 231231242342342342342342342",
"body": "testing",
"id_creator": 1,
"creator_login": "landrynek",
"created_at": "2020-04-08 14:24:25",
"updated_at": "2020-04-08 14:41:09",
"status": 1,
"accepted_at": null,
"deleted_at": null
},
{
"id": 112,
"title": "Title 231231242342342342342342342dsaasassdadasda",
"body": "testing sadasasa",
"id_creator": 1,
"creator_login": "landrynek",
"created_at": "2020-04-08 14:24:34",
"updated_at": "2020-04-08 14:48:55",
"status": 1,
"accepted_at": null,
"deleted_at": null
}
The filter array:
filteredData$:Observable<any[]>;
My interface Announcement:
export interface Announcement{
id: number;
title: string;
body: string;
id_creator: number;
creator_login: string;
created_at: Date;
updated_at: Date;
status: number;
acepted_at: Date;
deleted_at:Date;
price?: number;
number_of_workers?: number;
available?: Date;
end_available?: Date;
}
Incorporating into HTML and my component.ts file:
<input type="text" (keyup)="updateFilter()" [formControl]="inputControl" required />
(component.ts)
inputControl = new FormControl();
Method used for filtering:
updateFilter() {
this.filteredData$ = combineLatest(
this.announcementList$,
this.inputControl.valueChanges.pipe(
startWith(""),
debounceTime(400)
)
).pipe(
distinctUntilChanged(),
filter(([list, input]) => Boolean(list)),
map(([list, input]) => {
return list.filter(
({ creator_login }) => creator_login === input);
})
);
this.announcementList$ = this.filteredData$;
this.table.offset = 0;
}
When typing any string in the input field, the data is not being filtered.. How can I properly filter and display results in my HTML table? When I console.log the 'list' in the last filter, I see all data in the array but the input remains empty..