rxjs - angular 11 handle http response

Question

Guess this might be basic but I'm a complete angular and observable beginner. Trying to follow the angular official Heroes tutorial which in the end uses an in-memory api to mock a real server; I am hooking my example with a real backend but unsure how to handle the data returned from the server properly.

I have a HeroService, there is a method to get all heroes. I am using angular's HttpClient and by design my server returns a single object with a results property, which itself is an array. How can I convert the results property in the response to an Observable of Hero[]? By the way, each element in results property has the same shape as the defined Hero interface.

getHeroes(): Observable<Hero[]> {
    var res: Hero[] = []
    return this.http.get("https://my_heroes_url", this.httpOptions)
            .pipe(x => x['results'] as Hero[]);
    
  }

question from:https://stackoverflow.com/questions/65895396/angular-11-handle-http-response

Answer 1

Use the map RxJS operator:

import { map } from 'rxjs/operators';

getHeroes(): Observable<Hero[]> {
  return this.http.get("https://my_heroes_url", this.httpOptions)
            .pipe(map(x => x['results'] as Hero[]));
}

For more information about RxJS operators, consider taking a look at the RxJS manual on operators.