Error : .map() is not a function [duplicate]

Question

This question already has an answer here:

• Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null] 17 answers

Trying to subscribe to the parsed response of HTTP - GET from the component. Getting a error saying .map is not a function whether used from HTTPService or from the component class.

Httpdemo.getResponse().map(res => res.json()).subscribe((cities)=>{ 
   this.cities = cities.cities;          
   console.log(this.cities);
});

But the following works:

Httpdemo.getResponse().subscribe((cities)=>{ 
    this.cities = JSON.parse(cities._body).cities;          
    console.log(this.cities);
});

The parsing also does not work in the Httpdemo service.

return this.http.get('./app/cities.json').map(res => res.json())

What is wrong with the usage here in my code?

Answer 1

In general, I'd suggest to import below library if you are not interested to load/target individual Rxjs operators.

Use,

import 'rxjs/Rx';

Answer 2

You need to import the map operator for Observable as described below:

import 'rxjs/add/operator/map';

By default not all operators are included.

See this answer for more details:

• Angular 2 HTTP GET with TypeScript error http.get(...).map is not a function in [null]