Angular RxJS Observable Filter on array of objects

Question

I am new to Angular and Observable. I want to apply filter on array of objects. This is how my code looks. .

getReport() gets all reports.

 getReports(): Observable<IReport[]>  {
    console.log("in get Reports Service Call");
    return this._http.get<IReport[]>(this.URL)
      .pipe(
        tap(data => console.log('All Data Retrieved - ' + JSON.stringify(data))),
        catchError(this.handleError));
  }

I am trying to write another method that can filter based on report name and give me array of IReport. This is what I have now.

 getReportDetails(name : string) : Observable<IReport[]>
  {
    return this.getReports().pipe(
      map((reports : IReport[]) => reports.find(p => p.reportName === name))
    );
  }

I am getting error as

Type 'Observable<IReport>' is not assignable to type 'Observable<IReport[]>'.

Here is IReport interface with 5 properties.

export interface IReport {
    date: Date;
    reportName: string;
    reportLink: string;
    reportStatus: string;
    region: string;
  }

What am I doing wrong? Thanks all.

Which method gives you the error when executed, getReports() or getReportDetails(name)? — Thabo
– Thabo, Commented Sep 10, 2018 at 18:24

Olivier Boissé · Accepted Answer · 2018-09-10 18:20:05Z

7

I think it should be

map((reports : IReport[]) => reports.filter(p => p.reportName === name))

instead of

map((reports : IReport[]) => reports.find(p => p.reportName === name))

find will return the first IReport that matches the condition p.reportName === name

answered Sep 10, 2018 at 18:20

Olivier Boissé

18.5k7 gold badges54 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abel Valdez · Accepted Answer · 2018-09-10 22:27:04Z

1

Just try by changing find with filter, find is to get just one object, and filter is to get an array of objects

getReportDetails(name : string) : Observable<IReport[]>
  {
    return this.getReports().pipe(
      map((reports : IReport[]) => reports.filter(p => p.reportName === name))
    );
  }

answered Sep 10, 2018 at 22:27

Abel Valdez

2,4081 gold badge19 silver badges34 bronze badges

Comments

Gurvinder Guraya · Accepted Answer · 2018-09-11 01:10:25Z

1

Even better solution for filtering returned data will be filter operator of rxjs

https://www.learnrxjs.io/operators/filtering/filter.html And then you can just easily pipe it to your older observable and return observable of filtered data which you can subscribe on

answered Sep 11, 2018 at 1:10

Gurvinder Guraya

6694 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular RxJS Observable Filter on array of objects

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related