Angular2: res.json is not a function

Question

I am trying to use the following service in my code:

import {Injectable} from '@angular/core';
import {Http,Response} from "@angular/http";
import 'rxjs/Rx';

@Injectable()
export class HttpService{
    constructor(private http : Http){}

    getData(){
      return  this.http.get("URI")
      .map( (res: Response) => res.json()  );
    }
}

The problem is, in run time it complains with:

res.json is not a function

I have defined the datatype of res as Response, but still complains

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

if i replace the map with subscribe it works fine:

.subscribe( res =>{
                res.json();
                console.log("City is:"+ res.json().city.name)
            });

I had this issue when I had functionA() calling functionB() and both used a call to map(). By the time functionA map() was called B's map had already transformed the res.json() into an array of objects which meant that A had no json available. Fix was to remove the map() call from functionB(), so only the top level map() was called — Matthew Hegarty
– Matthew Hegarty, Commented Dec 23, 2016 at 17:09

jcaruso · Accepted Answer · 2017-11-13 22:08:46Z

18

For what its worth, in Angular 5 I found that the res.json is not a function error can be fixed by just returning res if the response is pure json.

answered Nov 13, 2017 at 22:08

jcaruso

1,04813 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stefan Svrkota · Accepted Answer · 2016-08-26 08:56:57Z

6

Try to import 'rxjs/add/operator/map'; instead of import 'rxjs/Rx';. That should fix the problem.

answered Aug 26, 2016 at 8:56

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

3 Comments

Alex Beugnet Over a year ago

Unless the result is not correct JSON, I believe Stefan is right.

Toby Speight Over a year ago

Although this code may help to solve the problem, it doesn't explain why and/or how it answers the question. Providing this additional context would significantly improve its long-term educational value. Please edit your answer to add explanation, including what limitations and assumptions apply.

Stefan Svrkota Over a year ago

@TobySpeight If I had an explanation, don't you think I would provide it? I had the same problem a few days ago and this is how I fixed it. I can't think of any reason why import 'rxjs/Rx' wouldn't work because reference to rxjs/add/operator/map exists in Rx.js file, so I guess it is some sort of bug, but I'm not 100% sure, so I didn't mention it at all, just wanted to provide fix for the problem.

Muhammad Saqlain · Accepted Answer · 2018-08-07 15:25:35Z

1

You Don't need to use this: .map((res: Response) => res.json() ); or .map(res => res.json()); because HttpClient.get() feeds or applies to res.json() automatically and returns Observable<HttpResponse<string>>.

You no longer need to call this function yourself again. Just simply put it this way: .map(res => res ); this resolves or solve the problem.

edited Aug 7, 2018 at 15:25

Muhammad Saqlain

2,2104 gold badges39 silver badges54 bronze badges

answered Aug 7, 2018 at 15:15

Emmanuel Chijioke Osuji

191 bronze badge

Comments

elmetni · Accepted Answer · 2020-10-29 06:15:16Z

0

You do not need to call res.json() if you response is already a Json you can directly work with res you do not even need to use map in this case

  getData(){
  return  this.http.get("URI");
}

answered Oct 29, 2020 at 6:15

elmetni

1041 silver badge10 bronze badges

Comments

Dmitriy · Accepted Answer · 2017-12-13 13:59:59Z

-2

Try to put only like this

.map((response: Response) => response)

This work surely in Angular

edited Dec 13, 2017 at 13:59

Dmitriy

5,58512 gold badges27 silver badges39 bronze badges

answered Dec 13, 2017 at 13:53

Vishwa Deepak Singh

4533 silver badges6 bronze badges

Collectives™ on Stack Overflow

Angular2: res.json is not a function

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related