mapping http response to object array in type argument

Question

I wonder if someone can explain this error to me, since Im relatively new to angular, typescript and rxjs.

What I try to do is to map the server response I get for calling getHeroes() in a format that makes it easy for my components to consume it.

This is my getHeroes() method that is working:

  getHeroes(): Observable<Hero[]> {
    const heroes = this.http.get<any>(this.heroesUrl)
      .pipe(
        map((res: EmbeddedResponse) => res._embedded.heroes),
        tap(data => this.log('HeroService: fetched Heroes'),
          catchError(this.handleError<Hero[]>('getHeroes', []))
        ))
    return heroes
  }

Notice the any type argument in this.http.get<any>()

I would like to be more specific with the type argument in getHeroes():

  getHeroes(): Observable<Hero[]> {
    const heroes = this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
        map((res: EmbeddedResponse) => res._embedded.heroes),
        tap(data => this.log('HeroService: fetched Heroes'),
          catchError(this.handleError<Hero[]>('getHeroes', []))
        ))
    return heroes
  }

Notice the Hero[] type argument in this.http.get<Hero[]>()

But changing the type argument in getHeroes() from any -> Hero[] resolves in this Error:

error TS2345: Argument of type 'OperatorFunction<EmbeddedResponse, Hero[]>' is not assignable to parameter of type 'OperatorFunction<Hero[], Hero[]>'.
  Property '_embedded' is missing in type 'Hero[]' but required in type 'EmbeddedResponse'.

The EmbeddedResponse interface looks like this:

interface EmbeddedResponse {
  _embedded: {
    heroes: Hero[]
  }
}

The response from the server looks like this:

{
  "_embedded" : {
    "heroes" : [ {
      "id" : 1,
      "name" : "Dicke Berta",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/heroes/1"
        },
        "hero" : {
          "href" : "http://localhost:8080/heroes/1"
        }
      }
    }, {
      "id" : 5,
      "name" : "Cobra-Car",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/heroes/5"
        },
        "hero" : {
          "href" : "http://localhost:8080/heroes/5"
        }
      }
    } ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/heroes"
    },
    "profile" : {
      "href" : "http://localhost:8080/profile/heroes"
    },
    "search" : {
      "href" : "http://localhost:8080/heroes/search"
    }
  }
}

JonasK · Accepted Answer · 2021-10-15 11:06:42Z

1

The return type you defined in get is only assigned to the get function itself, not the whole chain. You defined get to return type Hero[], but in map you expect it to be of type EmbeddedResponse. Instead define get to return EmbeddedResponse:

this.http.get<EmbeddedResponse>(this.heroesUrl)

Then you don´t even need to define the type for "res" in map, since that is then already defined (though you can also leave it for readability):

map((res) => res._embedded.heroes)

The return type of your chain is defined by the last element return something, in your case map. res._embedded.heroes is of type Hero[], therefore your const heroes will be of type Observable<Hero[]>.

Finally in tap and catchError you probably set your brackets wrong. catchError shouldn´t be a part of tap but rather chained after it:

   tap(data => this.log('HeroService: fetched Heroes')),
   catchError(this.handleError('getHeroes', []))
);

answered Oct 15, 2021 at 11:06

JonasK

2284 silver badges14 bronze badges

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

6 Comments

Vultimitavin Over a year ago

Thanks for the explanation. But isnt map((res: EmbeddedResponse) => res._embedded.heroes) supposed to return Hero[]

JonasK Over a year ago

@Vultimitavin It is, but you define that in map and not in the previous get call. You could also do this: map<Hero[]>((res) => res._embedded.heroes)

Vultimitavin Over a year ago

Then I dont get it... Maybe you could clarify when I tell you my understanding: 1. this.http.get<typeargument>() The typeargument defines what I expect to get back from the http.get() 2. map((res: EmbeddedResponse) => res._embedded.heroes) returns an object array of type Hero and ultimatively hands it over to http.get() 3. In my understanding I would now be fine setting Hero[] as my type argument -> this.http.get<Hero[]>() but this is obviously not the right understanding

JonasK Over a year ago

@Vultimitavin You´re wrong in your second point: The return of map does not get handed over to get but rather is chained after it. However its result is then written into heroes. To make it clear try this: const embeddedResponse = this.http.get<EmbeddedResponse>(this.heroesUrl); const heroes = embeddedResponse.pipe(...);

Vultimitavin Over a year ago

Ah I see. I always thought of it as a 'bubble'-behaviour. Is this true for any kind of nested functions? Thanks for your great help there :)

|

navnath · Accepted Answer · 2021-10-15 11:10:14Z

0

Your catchError operator should be inside pipe not inside tap

pipe(
    map((res: EmbeddedResponse) => res._embedded.heroes),
    tap(data => this.log('HeroService: fetched Heroes')),
    catchError(this.handleError<Hero[]>('getHeroes', []))
))

Demo

answered Oct 15, 2021 at 11:10

navnath

3,7241 gold badge13 silver badges20 bronze badges

Collectives™ on Stack Overflow

mapping http response to object array in type argument

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related