Angular2 Filtering an http request

Question

I wanted to get some advice and guidance regarding filtering an http request in Angular. I have a service that reaches out and grabs the data. The data is then used in an ngFor on the component.

Data Service Function to Grab the Data

getCycleStages(): Observable<StageContainer[]> {
  console.log('Starting stages');
  const url = this.stagesURL;
  return this.http.get<StageContainer[]>(url, this.httpOptions);
}

Then, on the component I import the service and subscribe to the http request.

Component Function to Subscribe to the Service Function

getStages(): void {
  this.BCS.getCycleStages()
  .subscribe({
    next: (response : any) => this.stages = response['value'],
    error: (e) => console.error(e),
    complete: () => console.log(this.stages)
  })
}

This all works, I get the data successfully. But I would like to filter the data I get from the http.get request. I have been searching online and trying different guides and looking at documentation. I have tried to filter in the service we seemed logical to me, as well as on the component, but I'm doing something (probably a lot) wrong.

Attempt 1 - Filter on the data service.

getCycleStages(): Observable<StageContainer[]> {
  console.log('Starting stages');
  const url = this.stagesURL;
  return this.http.get<StageContainer[]>(url, this.httpOptions).pipe(
    filter(val => val.sName = 'James')
  );
}

Attempt 2 - When I Subscribe on the Component

getStages(): void {
  this.BCS.getCycleStages()
  .subscribe({
    next: (response : any) => this.stages = response['value'].filter(val => val.sName = 'James'),
    error: (e) => console.error(e),
    complete: () => console.log(this.stages)
  })
}

Thanks so much for any help or guidance you can offer.

Have a great day!

Both of my attempts result in errors. I am trying to figure out a way to filter my http.get request. Basically, I don't know where to put my filter and I was looking for some guidance. — James ODonnell
– James ODonnell, Commented Mar 28, 2022 at 21:55
First attempt is fine as long as you actually do a compare instead of an assignment so instead of val.sName = 'James' do val.sName === 'James' — MikeOne
– MikeOne, Commented Mar 28, 2022 at 22:25

Blastouz · Accepted Answer · 2022-03-28 22:32:38Z

seems that you are not making a comparaison in your first solution :

getCycleStages(): Observable<StageContainer[]> {
  console.log('Starting stages');
  const url = this.stagesURL;
  return this.http.get<StageContainer[]>(url, this.httpOptions).pipe(
    filter(val => val.sName === 'James')
  );
}

It should be working fine then :D

And even better, if you want to reuse your service, pass an optional argument :

getCycleStages(filterQuery?: string): Observable<StageContainer[]> {
  console.log('Starting stages');
  const url = this.stagesURL;
  return this.http.get<StageContainer[]>(url, this.httpOptions).pipe(
    filter(val => val.sName === filterQuery)
  );
}

Collectives™ on Stack Overflow

Angular2 Filtering an http request

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related