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

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

• javascript
• angular
• rxjs
• angular-http

• what is the angular version – Sajeetharan Commented Dec 21, 2017 at 2:07
• 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 Commented Dec 21, 2017 at 2:09
• 1 Angular 5 no longer includes Http. It has been superceded by HttpClient. – Roddy of the Frozen Peas Commented Dec 21, 2017 at 2:17
• angular-http-get-with-typescript-error-http-get-map-is-not-a-function-in-n – HDJEMAI Commented Dec 21, 2017 at 2:28

4 Answers 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/mon/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)
    }
}

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

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.

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>