Angular - 将对 function 的响应从 @angular/http 映射到 @angular/common/http

Question

I'm upgrading from '@angular/http' to '@angular/common/http'. I have the following TS code snippet, which worked in the old Http module, but does not work anymore in the new HttpClient module:

    let itemsMapped = this.http.get(this.baseUrl).map(response => { 
        return response.json().itemsList.map(toItems);
    })

where itemsMapped is a value which will be returned, itemsList is a promise, and toItems is a function to which the values of the response are mapped. After upgrading to HttpClient, I'm getting the error "Property 'json' does not exist on type 'Object'." I have read that the new HttpClient returns an object (in my case "response"). How can I use it in the new HttpClient to map its values to the function "toItems", like before? Thank you in advance!

Answer 1

The response is already an Object that you do not have to transform from JSON. You can use the following syntax:

this.http
  .get(this.baseURL)
  .pipe(
    map(res=>res=toItems(res),
  ).subscribe(
    res=>itemsMapped=res
  )

Assuming your toItems() is just mapping it to a part of the response you could skip the toItems() by using:

this.http
  .get(this.baseURL)
  .pipe(
    map(res=>res=res['key_name_of_items'],
  ).subscribe(
    res=>itemsMapped=res
  )

An example in stackblitz: https://stackblitz.com/edit/angular-ivy-p4i2rr?file=src/app/app.component.ts