RsJX 'Map' operator is not working in Angular 6

Question

I'm trying to use map operator from RxJS but it throws an error saying

Property 'map' does not exist on type 'Observable'.

Here is the code

    import { Injectable } from "@angular/core";
    import { Http } from "@angular/http";
    import "rxjs/add/operator/map";
    @Injectable()

    export class DataService {
     constructor(public http: Http) {}

     getData() {
       return this.http
        .get("https://jsonplaceholder.typicode.com/users")
        .map(res => res.json());
      }
    }

which angular version do you use?

dev-assassin
– dev-assassin

2018-08-18 05:51:50 +00:00
Commented Aug 18, 2018 at 5:51 — dev-assassin
– dev-assassin, Commented Aug 18, 2018 at 5:51
@ninjadev1030 Angular 6.0.9

rocktimsaikia
– rocktimsaikia

2018-08-18 06:38:08 +00:00
Commented Aug 18, 2018 at 6:38 — rocktimsaikia
– rocktimsaikia, Commented Aug 18, 2018 at 6:38

Suren Srapyan · Accepted Answer · 2018-08-18 07:27:27Z

9

For first Http is deprecated in higher versions than Angular 4. Instead of it you need to use HttpClient with HttpClientModule from "@angular/common/http". And using HttpClient you will get the JSON parsed result, so you don't need res.json() longer.

For second map in new verions of RxJS is being used another way. It is now pipeable, you need to use it combined with pipe.

import { Injectable } from "@angular/core";
import { HttpClient} from "@angular/common/http";

@Injectable()    
export class DataService {
  constructor(public httpClient: HttpClient) {}

  getData() {
    return this.httpClient
               .get("https://jsonplaceholder.typicode.com/users")
  }
}

Using map operator

import { map } from 'rxjs/operators';

...

someFunction() {
   this.httpClient.get("https://jsonplaceholder.typicode.com/users")
                  .pipe(map(res) => something with res);
}

...

edited Aug 18, 2018 at 7:27

answered Aug 18, 2018 at 5:54

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rocktimsaikia Over a year ago

Thank you. Plus i had to import 'HttpClientModule' instead of only 'HttpModule' in "app.module.ts". And now its working good :)

Suren Srapyan Over a year ago

@Rocktim Thanks. About HttpClientModule I have mentioned it above )

Jagdish Chopde Over a year ago

Thanks a lot. I was importing map operator like import 'rxjs/add/operator/map'; this. instead of import { map } from 'rxjs/operators';

Krishna Rathore · Accepted Answer · 2018-08-18 06:26:25Z

5

in RXJS 6 import { map } from 'rxjs/operators';

import { map } from 'rxjs/operators';
getData() {
   return this.http.get("https://jsonplaceholder.typicode.com/users")
   .pipe(
        map(res => res.json())
    );
}

edited Aug 18, 2018 at 6:26

answered Aug 18, 2018 at 6:13

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Comments

dev-assassin · Accepted Answer · 2018-08-18 05:58:18Z

2

import { Injectable } from "@angular/core";
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
@Injectable()

export class DataService {
 constructor(private http: HttpClient) {}

 getData() {
   return this.http
    .get("https://jsonplaceholder.typicode.com/users")
    .map(res => res.json());
  }
}

answered Aug 18, 2018 at 5:58

dev-assassin

2712 silver badges13 bronze badges

1 Comment

user184994 Over a year ago

This still won't work if using newer versions of RXJS, and also if using HttpClient then there is no need for res.json() anyway

Collectives™ on Stack Overflow

RsJX 'Map' operator is not working in Angular 6

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related