Parse JSON response in Angular 8 with response.json()

Question

I am trying to get the search data from an API in angular 8. I have a problem with method response.json() as it creates an error response.json is not a function.

search(query: string): Observable<SResult[]> {   
  const queryUrl = `${url}${params}`;
  return this.http.get(queryUrl, {headers})   
    .pipe(
      map((response : any) => {
        return (<any>response.json())
          .map((res) => {
            return new SearchResult(res)
          })
      })      
    ) 
}

Hi, you can reffer to the link for your problem : https://stackoverflow.com/questions/46630893/angular-res-json-is-not-a-function — Noureddine, Feb 20 '20 at 16:05
HttpClient automatically parses the response as JSON you do not need to add `response.json()`. Instead just make it a [typed response](https://angular.io/guide/http#requesting-a-typed-response) — Alexander Staroselsky, Feb 20 '20 at 16:11

score 1 · Accepted Answer · answered Feb 20 '20 at 16:27

When using angular HttpClient your request is automatically parsed as JSON (unless the request's response type is not set to handle different data type). As @Alexander Statoselsky said in the comment, you can set the type of your response, so TypeScript will now what data structure is returned from the backend.

search(query: string): Observable<SearchResult[]> {   
  const queryUrl = `${url}${params}`;
  return this.http.get<CustomResultInterface[]>(queryUrl, {headers}).pipe(

    // As HttpClient cares only about the structure, you still need to loop 
    // through the returned data and create a classes if you want the method to return
    // a list of SearchResult classes.
    // CustomResultInterface is your custom interface that carries only the structure of the response
    map(results => results.map(result => new SearchResult(result)))
  ); 
}

Also, when using queryParameters, you might want to take a look at HttpParams which you'd use as following example

search(query: string): Observable<SearchResult[]> {   
  const params = new HttpParams();
  params.set('query', query);
  return this.http.get<CustomResultInterface[]>(url, { params, headers }).pipe(
    map(results => results.map(result => new SearchResult(result)))
  ); 
}

Thanks @Dawid Zbiński. Now I have the follow TypeError: results.map is not a function. — Jocelyn, Feb 21 '20 at 09:24
Well, then the results are not an array. Try console logging it. — Dawid Zbiński, Feb 21 '20 at 11:04

Parse JSON response in Angular 8 with response.json()

1 Answers1