Angular 4 this.http.get(...).map is not a function

Question

Hi i have problem with my code.

import { Injectable } from '@angular/core';
import { Car } from "./models/car";
import { Observable } from "rxjs/Observable";
import { Http } from "@angular/http";
import 'rxjs'

@Injectable()
export class CarsService {
   private apiUrl = "http://localhost:3000/api/cars";
   constructor(private http : Http) { }

    getCars() : Observable<Car[]> {
        return this.http.get(this.apiUrl)
           .map((res) => res.json())
    }
}

With this code i have error:

this.http.get(...).map is not a function

but when i add:

import 'rxjs/add/operator/map'

Still have problem but error is:

Cannot read property 'map' of undefined

Can you help me? Thanks

Angular CLI: 1.5.0 Node: 6.11.4 OS: win32 x64 Angular: 5.0.1 ou its 5.0.1 I thought I was using version 4 — Marek Patyna, Dec 21 '17 at 02:09
Angular 5 no longer includes `Http`. It has been superceded by `HttpClient`. — Roddy of the Frozen Peas, Dec 21 '17 at 02:17
[angular-http-get-with-typescript-error-http-get-map-is-not-a-function-in-n](https://stackoverflow.com/questions/34515173/angular-http-get-with-typescript-error-http-get-map-is-not-a-function-in-n) — HDJEMAI, Dec 21 '17 at 02:28

score 4 · Accepted Answer · answered Dec 21 '17 at 04:21

4

As mentioned by others Http is deprecated, use HttpClient instead. HttpClient parses your response to an Object, so you remove the mapping of the response. Also, to avoid type checking errors, tell Angular what kind of response you are expecting.

So import HttpClientModule and add it to imports array, after BrowserModule. In your Service import HttpClient, inject it in your constructor and use it the following way:

import { Injectable } from '@angular/core';
import { Car } from "./models/car";
import { Observable } from "rxjs/Observable";
import { HttpClient } from "@angular/common/http";
import 'rxjs'

@Injectable()
export class CarsService {
   private apiUrl = "http://localhost:3000/api/cars";
   constructor(private httpClient : HttpClient) { }

    getCars() : Observable<Car[]> {
      // tell Angular you are expecting an array of 'Car'
      return this.httpClient.get<Car[]>(this.apiUrl)
    }
}

answered Dec 21 '17 at 04:21

AT82

71,416
24
140
167

Okey so i import my HttpClientModule and update my code. I run my server this http://localhost:3000/api/cars and it work. Everything is ok i see my Car[] But still in browser i have: Cannot read property 'map' of undefined Maybe i Can ignore this or not? If everything is ok? – Marek Patyna Dec 21 '17 at 12:56
Well you are not mapping anywhere anymore? Have you tried restarting your project? Or are you using `map` somewhere else? – AT82 Dec 21 '17 at 13:05
Wait like 5 min i add in answer my another code and tell you something. – Marek Patyna Dec 21 '17 at 13:11
I add answer can you check? – Marek Patyna Dec 21 '17 at 13:18
Everything is okay now. Thanks for help @AJT_82 – Marek Patyna Dec 21 '17 at 15:36

Sajeetharan · Answer 2 · 2017-12-21T02:14:57.440

2

With angular5 HttpClient implementation already includes inner using of the map.so it works for you automatically.

just update it as

 getCars() : Observable<Car[]> {
     return this.http.get(this.apiUrl)
 }

Also make sure you are using HttpClient instead of Http.

You can read more about this here

edited Dec 21 '17 at 02:14

answered Dec 21 '17 at 02:10

Sajeetharan

216,225
63
350
396

So what i have to do? – Marek Patyna Dec 21 '17 at 02:12
@MarekPatyna check the link attached – Sajeetharan Dec 21 '17 at 02:15
did the answer help – Sajeetharan Dec 21 '17 at 02:36
Okey now i update my http and delete this: .map((res) => res.json()) – Marek Patyna Dec 21 '17 at 03:09
And in my cmder i have this error : error TS2322: Type 'Observable – Marek Patyna Dec 21 '17 at 03:09
Yes everything is okay now – Marek Patyna Dec 21 '17 at 17:52
did the answer help – Sajeetharan Dec 21 '17 at 17:55
Answer AJT_82 helped me. – Marek Patyna Dec 23 '17 at 00:09

score 0 · Answer 3 · answered Dec 21 '17 at 02:13

Edit your code

import { Injectable } from '@angular/core';
import { Car } from "./models/car";
import { Observable } from "rxjs/Observable";
import { Http } from "@angular/http";


@Injectable()
export class CarsService {
   private apiUrl = "http://localhost:3000/api/cars";
   constructor(private http : Http) { }

   getCars() : Observable<Car[]> {
     return this.http.get(this.apiUrl)
   }
}

since it automatically parse the response as JSON. You don't have to explicitly parse it.

score 0 · Answer 4 · answered Dec 21 '17 at 13:18

ngOnInit() {
 this.loadCars();

}

loadCars() : void {
 this.carsService.getCars().subscribe((cars) => {
  this.cars = cars;
  this.countTotalCost();
 })
}

So i move this this.countTotalCost();

from ngOnInit to loadCars

and now .map its ok.

I have only this error: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'NaN'.

<div class="row" *ngIf="grossCost"> //this line error/error context
 <div class="col-sm-12">
  <div class="total-cost">
   <p class="text-right">TOTAL GROSS COST: {{ grossCost}} PLN</p>
  </div>
 </div>
</div>

Angular 4 this.http.get(...).map is not a function

4 Answers4