Angular 4 this.http.get（...）。map不是函数

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

Answer 1

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)
    }
}

Answer 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

Answer 3

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.

Answer 4

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>