How to modify the response to an HTTP request and access it before return it out from Observable?

We often need to modify the response that is return from the http request before it return as observable. That means before we parse it into our component we might need to update.

It all depends on the version of RxJs. Angular 6 launches with RxJs 6 – which means that the map()/catch() approach is no longer valid.

Instead, you have to use pipe + map()/catchError() as shown below:

return this.http.get<SomeType>(url, {headers: this.headers})
  .pipe(
     map( response => {  // NOTE: response is of type SomeType
         // Does something on response.data
         // modify the response.data as you see fit.

         // return the modified data:
         return response; // kind of useless
     }),
     catchError( error => {
         return throwError(error); // From 'rxjs'
     })
  ); // end of pipe

Again with this asynchronous request we will see how we can update data before subscribe.

this._app.getApp(id).pipe(map(obj=>obj.map(x=> ({ ...x, isExpanded: false }))) , takeUntil(this.destroy$)).subscribe((res)=>{
      console.log('---->>>', res);
    });
  }

Leave a Reply

Your email address will not be published. Required fields are marked *