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

Question

I'm upgrading to Angular to version 5, I was using @angular/http before and now I need to update to @angular/common/http and use HttpClient

I already just make http requests in services (not in components) and that makes them easy to reuse

This is what I already have (from deprecated http)

return this.http.get(url, {headers: this.headers}).map(
      (response: Response) => {
        const data = response.json();
        // Does something on data.data
        
        // return the modified data:
        return data.data;
      }
    ).catch(
      (error: Response) => {
        return Observable.throw(error);
      }
    );

Now from what I learned from new HttpClient it's like I can't modify the response and give it to the component method which is subscribing to it.

how should I modify the response to an HTTP request and easily access it before return it out from Observable?

I just want the same ability to modify the response which I get from API... Like adding some item to it, or do some more stuff to it before returing it

Answer 1

It all depends on the version of RxJs. Angular 6 shipped 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:

Before Angular 6 / RxJs 6 - classic Http use:

return this.http.get(url, {headers: this.headers}).map(
  (response: Response) => {
    const data : SomeType = response.json() as SomeType;
    // Does something on data.data

    // return the modified data:
    return data.data; // assuming SomeType has a data properties. Following OP post
  }
).catch(
  (error: Response) => {
    throwError(error); // From 'rxjs'
  }
);

Should be changed to this:

After Angular 6 / RxJs 6 - HttpClient migration:

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

In the pipe, map() will pick up the response object (already parsed from JSON) and catchError() will pick up the first error if the HTTP fails.

Also, note that your Headers need to be HttpHeaders object too.

Read on pipe, map and catchError in RxJs 6

Answer 2

My service

import {HttpClient} from '@angular/common/http';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class DataService {
    constructor(private http: HttpClient) {}
    getData()
    {
        return this.http.get('../assets/data.json').map(data=>{
            return this.process(data);
        }).catch(
            (error: Response) => {
              return Observable.throw(error);
            });
    }
    process(data:any)  
    {
        let dataTransform:any[]=[];
        let i:number=0;
        for (let item of data)
        {
            dataTransform.push({"id":i,"key":item.key});
            i++;
        }
        return dataTransform;
    }
}

//My component

export class AppComponent implements OnInit {
  constructor(private dataService:DataService){}
  ngOnInit(){
    this.dataService.getData().subscribe((data:any)=> {
      console.log(data);
    });
  }
}

//the asset/data.json

[
    {"key":"uno"},
    {"key":"dos"},
    {"key":"tres"},
    {"key":"cuatro"},
    {"key":"cinco"}
]