Angular - res.json() is not a function

Question

I am having an issue with my API Service. This service connects to my nodejs backend api.

The error says

ERROR TypeError: res.json is not a function

I am getting this error after recently updated this service to use the HTTPClient instead of Http. Im getting this reponse because im missing the old http with the new? if thats the case is there an new Response and how do i use it?

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { HttpHeaders, HttpClient, HttpParams } from '@angular/common/http';
import { Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { JwtService } from './jwt.service';

@Injectable()
export class ApiService {
  constructor(
    private http: HttpClient,
    private jwtService: JwtService
  ) {}

  private setHeaders(): HttpHeaders {
    const headersConfig = {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    };
    if (this.jwtService.getToken()) {
      headersConfig['Authorization'] = this.jwtService.getToken();
    }
    return new HttpHeaders(headersConfig);
  }

  private formatErrors(error: any) {
     return Observable.throw(error.json());
  }

  get(path: string, httpParams: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`${environment.api_url}${path}`, { headers: this.setHeaders(), params: httpParams })
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

  put(path: string, body: Object = {}): Observable<any> {
    return this.http.put(
      `${environment.api_url}${path}`,
      JSON.stringify(body),
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

  post(path: string, body: Object = {}): Observable<any> {
    return this.http.post(
      `${environment.api_url}${path}`,
      body,
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

  delete(path): Observable<any> {
    return this.http.delete(
      `${environment.api_url}${path}`,
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }
}

score 109 · Accepted Answer · answered Oct 08 '17 at 12:06

109

HttpClient.get() applies res.json() automatically and returns Observable<HttpResponse<string>>. You no longer need to call this function yourself.

See Difference between HTTP and HTTPClient in angular 4?

answered Oct 08 '17 at 12:06

Max Koretskyi

101,079
60
333
488

4

So i can remove this entire line ```.map((res: Response) => res.json()); ``` ? – Kay Oct 08 '17 at 12:09
how to get the headers then from the response ? – bLaXjack Jan 28 '18 at 15:38
3

This seems to go for `'Http.post()` too, which makes sense. – goneos May 03 '18 at 01:20
What if I still want to call it? I mean, I need also the raw response – Christian Vincenzo Traina Apr 14 '19 at 10:46

score 19 · Answer 2 · edited Apr 16 '18 at 02:35

19

You can remove the entire line below:

 .map((res: Response) => res.json());

No need to use the map method at all.

edited Apr 16 '18 at 02:35

eyllanesc

235,170
19
170
241

answered Apr 16 '18 at 01:41

Debarati Majumder

191
1
2

score 14 · Answer 3 · answered Mar 22 '18 at 19:29

14

Don't need to use this method:

 .map((res: Response) => res.json() );

Just use this simple method instead of the previous method. hopefully you'll get your result:

.map(res => res );

answered Mar 22 '18 at 19:29

Maizied Hasan Majumder

1,197
1
12
25

score 1 · Answer 4 · answered Mar 14 '19 at 17:48

Had a similar problem where we wanted to update from deprecated Http module to HttpClient in Angular 7. But the application is large and need to change res.json() in a lot of places. So I did this to have the new module with back support.

return this.http.get(this.BASE_URL + url)
      .toPromise()
      .then(data=>{
        let res = {'results': JSON.stringify(data),
        'json': ()=>{return data;}
      };
       return res; 
      })
      .catch(error => {
        return Promise.reject(error);
      });

Adding a dummy "json" named function from the central place so that all other services can still execute successfully before updating them to accommodate a new way of response handling i.e. without "json" function.

Thank you! I have this exact issue and this worked for me. – Jay Culpepper Sep 12 '19 at 20:31 — Jay Culpepper, Sep 12 '19 at 20:31

Angular - res.json() is not a function

4 Answers4

Linked

Related