CODEWITHSUNDEEP
rxjs
shu
shu

Reputation: 244

filter operator in fromEvent function does not work in RxJS6

I'm new to RxJ. The version of RxJS 6.2.

I'm trying fromEvent method and filtering out mouse event info but it shows mouse position data even when clientX is bigger than 500 and seems filter method is not working.

Could anyone tell me what I'm doing wrong and how to fix it?

JavaScript

import { Observable, fromEvent } from "rxjs";
import { map, filter } from 'rxjs/operators';

let numbers = [1, 5, 10];

const source = fromEvent(document, "mousemove");
source.pipe(
  map((e: MouseEvent) => {
    return {
      x: e.clientX,
      y: e.clientY
    }
  }),
  filter(value => value.x < 500)
)

source.subscribe(
    value => console.log(value),
    e => console.log(`error: ${e}`),
    () => console.log('complete')
  );

Upvotes: 0

Views: 1216

Answers (1)

cartant
cartant

Reputation: 58410

The call to pipe returns a new observable - which you are ignoring. It does not modify the source observable.

You should subscribe to the observable returned by pipe instead of the source observable:

const source = fromEvent(document, "mousemove");

const mappedAndFiltered = source.pipe(
  map((e: MouseEvent) => {
    return {
      x: e.clientX,
      y: e.clientY
    };
  }),
  filter(value => value.x < 500)
);

mappedAndFiltered.subscribe(
  value => console.log(value),
  e => console.log(`error: ${e}`),
  () => console.log('complete')
);

Upvotes: 1

Related Questions