CODEWITHSUNDEEP
angularrxjsangular5observableangular6
Test User
Test User

Reputation: 35

Angular6 map is not a function

I am using angular6, when I write following code:

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
EditDetail(data) : Observable<Test[]> {
    let url = "http://www.example.com/api/getdetails";     
    return this.httpClient.get(url).map((response: Response) => {
    return <Test[]>response.json();
});

I am getting an error like :

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

in browser console.

I have also tried by

import { pipe } from 'rxjs';

And used 

return this.httpClient.get(url).pipe(
map((response: Response) => <Test[]>response.json())
  );

But it shows error like

 this.httpClient.get(...).pipe is not a function

Upvotes: 0

Views: 8010

Answers (5)

Rob Lassche
Rob Lassche

Reputation: 851

With Angular 6 and rxjs 6.3.1 it works as described above. I also had some problems with this change in rxjs and created a small demo.

imports:

`import { HttpClient, HttpErrorResponse, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators'
`

simple1 function with a httpclient-get. In the map function, some filtering is done. Return value is an observable :

`simple1(): Observable<any> {
    return this.http.get('https://jsonplaceholder.typicode.com/todos').pipe(
      map((res:[any]) => {
        let newArray:[any] = <any>[] ;
        res.forEach( (e) => {
          if( e['title'][0] == 'a') {
              newArray.push( res[0])
          }
        })
        return newArray
      })
    )
  }`

Consume the observable:

`constructor(private http: HttpClient) {
    this.simple1().subscribe(
      (response:HttpResponse<any>) => { console.log(response)},
      (error:HttpErrorResponse) => { console.log("error", error)},
      () => { console.log( 'finish')}
    )
  }`

Complete demo code is here

Upvotes: 1

KolP
KolP

Reputation: 31

First, you need to import operator map:

import { map } from 'rxjs/operators';

Second, you can use pipe(map()) like:

return this.httpClient.get(url).pipe(map((response: Response) => {}))

Upvotes: 1

Pramod Patil
Pramod Patil

Reputation: 2763

use pipe in order to use map. You need to use http client module in order use pipe function. Import this and initialize in constructor

import {HttpClient} from '@angular/common/http';
this.httpClient.get(...).pipe(map(data => res))

Upvotes: 1

Krishna Rathore
Krishna Rathore

Reputation: 9687

You can try with this solution.

this.httpClient.get(...).pipe(
    map(data => res)
).subscribe((data):any=>{
    console.log(data)
})

Upvotes: 1

Suren Srapyan
Suren Srapyan

Reputation: 68655

Starting from RxJS 5.5 you need to pipe map function.

return this.httpClient.get(url).pipe(
   map((response: Response) => <Test[]>response.json())
);

For more see Pipeable operators.

Upvotes: 7

Related Questions