Angular - map is not a function

Question

I'm trying to filer an Observable in my angular project, but it says: "... .map is not a function" so, can you explain what's wrong with my code?

tasks.component.ts (map also imported from rxjs/operators)

ngOnInit() {
    this.tasks = this.tasksService.tasks.map(x => x.filter(y => y.isDone == this.completed));
    this.tasksService.getTasks();
  }

And here's my service which provides the Observable:

task.service.ts

export class TasksService {
  private _tasks = new BehaviorSubject<Task[]>([]);
  tasks = this._tasks.asObservable();
  constructor(private http : Http) {
    console.log('Tasks Service is initialized...');
  }

  getTasks() {
    this.http.get(URL).subscribe(x => {
      this._tasks.next(x.json());
    });
  }

Why are you using HttpModule it is deprecated you should use HttpClientModule — Vikas
– Vikas, Commented May 25, 2018 at 12:46
@Vikas where has the OP mentioned about using HttpModule? you are just assuming I guess ... — FAISAL
– FAISAL, Commented May 25, 2018 at 13:36

FAISAL · Accepted Answer · 2018-05-25 12:36:44Z

6

Import map like this if you are using rxjs version less than 6.

import 'rxjs/add/operator/map';

If you are using rxjs version 6 or greater, then firstly you have to import operator like this:

import { map } from 'rxjs/operators';

Secondly, you have to use pipe before map:

this.tasks = this.tasksService.tasks.pipe(
                 map(x => x.filter(y => y.isDone == this.completed))
             );

edited May 25, 2018 at 12:36

answered May 25, 2018 at 12:34

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

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

3 Comments

Drobesz Over a year ago

I'm using import { map } from 'rxjs/operators'; right now. That's not the same?

FAISAL Over a year ago

^ this is version 6+ way of importing

Drobesz Over a year ago

It works well with import { map } from 'rxjs/operators'; at me with rxjs version 5.5.10... By the way the problem was I didn't call map inside the pipe function. Thanks a lot! ;)

mittal bhatt · Accepted Answer · 2018-05-25 13:09:43Z

0

Using Observable.subscribe directly should work.like below

@Injectable()
export class HallService {
    public http:Http;
    public static PATH:string = 'app/backend/'    

    constructor(http:Http) {
        this.http=http;
    }

    getHalls() {
    // ########### No map
           return this.http.get(HallService.PATH + 'hall.json');
    }
}


export class HallListComponent implements OnInit {
    public halls:Hall[];
    / *** /
    ngOnInit() {
        this._service.getHalls()
           .subscribe(halls => this.halls = halls.json()); // <<--
    }
}

answered May 25, 2018 at 13:09

mittal bhatt

1,0097 silver badges13 bronze badges

Comments

MJL · Accepted Answer · 2020-04-27 14:40:59Z

0

I had the problem too, when using somearray.map(...), and the problem turned out to be that somearray was null cause it had not been imported from the backend properly.

answered Apr 27, 2020 at 14:40

MJL

4005 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular - map is not a function

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related