24

I see Response.json() method being used a lot, and I'm using it myself, but either I'm missing something or the documentation for the Response class is incorrect.

Example:

getCurrentTime() {
    return this._http.get('http://date.jsontest.com/')
        .map((res:Response) => res.json())
}

On the Angular site at https://angular.io/docs/ts/latest/api/http/index/Response-class.html, I don't see the method as a member of the Response class.

If .json is not a member of the Response class, can someone point me in the direction of understanding how this works.

Or if the documentation is wrong, someone please say so.

Thanks in advance.

BBaysinger
  • 6,614
  • 13
  • 63
  • 132

3 Answers3

21

If you look at the API Reference for Response, you'll see that Response extends Body. If you try to search for Body, you won't find it, which probably means it isn't public. If you look at the source code for Body, you'll see the code for json

/**
 * Attempts to return body as parsed `JSON` object, or raises an exception.
 */
json(): any {
  if (typeof this._body === 'string') {
    return JSON.parse(<string>this._body);
  }

  if (this._body instanceof ArrayBuffer) {
    return JSON.parse(this.text());
  }

  return this._body;
}

Let me know if you need explanation of the source. It looks pretty self-explanitory to me though.

Paul Samsotha
  • 205,037
  • 37
  • 486
  • 720
  • Oh, man. Of course it's something obvious. Much appreciated. I'm new to Angular2, so not familiar with the documentation either. I'm surprised the API doesn't have a link to show inherited methods. – BBaysinger Dec 24 '16 at 02:56
  • 1
    Perhaps you can also explain to me why my question is getting voted down. I realize I was overlooking something possibly obvious, but how is it not a legitimate question? – BBaysinger Dec 24 '16 at 02:58
  • I don't know. People have their reasons. I can't assume to guess why. I personally saw nothing wrong with it. I wouldn't answer an question that I down-voted on. – Paul Samsotha Dec 24 '16 at 02:59
  • @BBaysinger, i think there is some bad ppl just do downvoting for fun , ahahh, nah, i think just ppl not reading your quesion carefullly, thats all, happy coding! – Kevin Simple Sep 13 '17 at 01:32
  • @BBaysinger in latest Anglar, it doesn't work, can you help me with that? – Aashish Kumar May 12 '18 at 13:12
10

Actually, the HTTP Client documentation (Process the response object) says:

Parse to JSON

This is not Angular's own design. The Angular HTTP client follows the Fetch specification for the response object returned by the Fetch function. That spec defines a json() method that parses the response body into a JavaScript object.

So Angular2 implements the Fetch Specification, which includes the specification for the mentioned Body mixin, Angular2's Response class is extending, including the .json() method.

The json() method, when invoked, must return the result of running consume body with JSON.

As you can see in peeskillet's link, Angular2 is implementing all specified methods of the Body mixin, except of formData().

naeramarth7
  • 6,030
  • 1
  • 22
  • 26
2

I had the same problem and this is how the error go away: In the new version of Angular 4+, you need to imports rxjs from:

import { map } from 'rxjs/operators';

instead of from importing from:

import 'rxjs/add/operator/map';

Next, change the .get() to .get() and also you have to use pipe for angular 4+ as below:

getCurrentTime() {
    return this._http.get<any>('http://date.jsontest.com/')
        .pipe(map((res:Response) => res.json()));
}

Hope that Helps...!

Aman
  • 167
  • 2
  • 1
  • 1
    the question is a bit old. I think remember that from Angular 7, http is outdated. And using httpClient you need **not** use json. By defect return a json object – Eliseo Aug 31 '20 at 15:31