How filter Observable array in Angular RxJS

Question

How can i filter array Observable in Angular? I have observable Array:

announcementList$: Observable<Announcement[]> = this.announcementService.getAnnouncement(0,0).pipe(filter(Boolean),shareReplay(), map(({data}) => data));

This list when get response from server have this array:
        {
            "id": 109,
            "title": "Tytul 231231242342342342342342342",
            "body": "testowanie",
            "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": "Tytul 231231242342342342342342342",
            "body": "testowanie",
            "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": "Tytul 231231242342342342342342342dsaasassdadasda",
            "body": "testowanie 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
        }

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

Input in html and my component.ts:

<input type="text" (keyup)="updateFilter()" [formControl]="inputControl" required />

(component.ts)
inputControl = new FormControl();

And my method:

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 i write any string in my input data is not filtered.. How can i filter and show result in my HTML table? When i console.log list in last filter i see all data in array but input is empty..

you don't need to define the observable each time a key up event is triggered, I think you should remove this part, also, based on which field you are filtering the list, currently I can see object == input value, also why do you use this.inputControl.value when you already have it part of your observable emitted item [list, input], input refer to this value — Munzer
i must remove this method and only do this.filteredData$= combineLatest..? — Dawid Ruciński
yes no need to do it on every keyup, just do it once, on init or something — Munzer
also i think this is what you are looking for list.filter(e => e.creator_login == input) — Munzer

Sahadan Sahadan · Accepted Answer · 2020-04-08T14:36:17

0

votes

Use FormGroup--> FormBuilder --> FormControl pattern in ReactiveForm

How filter Observable array in Angular RxJS

1 Answers