Angular HTTP - Observable: How to modify tutorial code to process full response and still return Hero[]

Question

Clarification for possible duplicate: The question was intended to ask how to observe the full response and return the body; not "how to read the headers"

I'm learning Angular and have gone through the Tour of Heroes tutorial.

I'm looking to modify the code below to get the full response so I can get links out of the header and then still return Hero[].

/** GET heroes from the server */
getHeroes (): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
    .pipe(
    tap(heroes => this.log(`fetched heroes`)),
    catchError(this.handleError('getHeroes', []))
    );
 }

https://angular.io/tutorial/toh-pt6#tap-into-the-observable

@RahulSingh This code is getting (observing) the response body only. I want to get the full httpResponse to extract from the header then pass along the body. — steve
– steve, Commented Dec 21, 2017 at 15:03
@jonrsharpe I looked at that question - that uses .subscribe(), the code above use .pipe() - I'm not sure how it answers my question — steve
– steve, Commented Dec 21, 2017 at 15:06

Patryk Brejdak · Accepted Answer · 2017-12-21 15:05:31Z

0

Well, if I understand you correctly, you want to pass additional param { observe: "response" }, then you can access headers by res.headers and response body by res.body.

return this.http.get<Hero[]>(this.heroesUrl { observe: "response" })
    .pipe(
    tap(res => this.log(`fetched extended response`)),
    catchError(this.handleError('getHeroes', []))
    );
 }

answered Dec 21, 2017 at 15:05

Patryk Brejdak

1,60115 silver badges27 bronze badges

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

3 Comments

steve Over a year ago

Yes, that is what I want to do, but setting observe: "response" breaks the code. Because a HttpResponse<Hero[]> can't be converted to Observable<Hero[]>

jonrsharpe Over a year ago

@steve yes, because you say your method is supposed to return Observable<Hero[]>, then actually return Observable<HttpResponse<Hero[]>> instead. Either change the signature, or use RxJS operators to extract the body as part of your pipe. You can't both change the thing the request returns and expect the signature to remain unchanged; you have to make adjustments.

steve Over a year ago

@jonrsharpe This "or use RxJS operators to extract the body" helped. However, the headers are not as expected. I'm updating the question.

steve · Accepted Answer · 2017-12-21 16:37:25Z

0

Based on @jonrsharpe's feedback, the code I was looking for is:

getHeroes (): Observable<Hero[]> {

  return this.http.get<Hero[]>(url,{observe: "response"})
  .pipe(
    tap(res => this.log("headers:" + JSON.stringify(res.headers)) ),
    map(res => res.body),
    catchError(this.handleError('getHeroes', []))
  );

}

I needed this "map(res => res.body)," to observe the response and still return the body.

answered Dec 21, 2017 at 16:37

steve

982 silver badges7 bronze badges

Comments

zinderud · Accepted Answer · 2018-02-15 13:46:28Z

0

  getHeros(): Observable<Hero[]> {
    if (this.heros) {
      return of(this.heros);  
    }
    return this.http
      .get<Heros[]>(this.herosPath)
      .pipe(
        tap(data => console.log(JSON.stringify(data))),
        tap(data => (this.patients = data),
        catchError(this.handleError))
      );
  }

answered Feb 15, 2018 at 13:46

zinderud

632 bronze badges

Collectives™ on Stack Overflow

Angular HTTP - Observable: How to modify tutorial code to process full response and still return Hero[]

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related