RxJS: Operator filter

Operator filter służy do przefiltrowania danych z Observable.

Sami określamy warunki filtracji.

Przykłady

Przykład 1

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

const observable = from([1, 2, 3, 4,  5, 6]).pipe(
    filter(value => value > 3)
);

observable.subscribe(console.log);
// Wyświetli:
// 4
// 5
// 6

Przykład 2

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

const data = [
    {
        type: 'product',
        title: 'Product 1' 
    },
    {
        type: 'service'
        title: 'Service 1'
    },
    {
        type: 'product',
        title: 'Product 2' 
    }
];

const observable = from(data).pipe(
    filter(item => item.type  === 'product')
);

observable.subscribe(console.log);

// Wyświetli:
[
	{
        type: 'product',
        title: 'Product 1' 
    },
    {
        type: 'product',
        title: 'Product 2' 
    }
]

Przykład 3

Załóżmy, że chcemy odbierać zdarzenie na wciśnięcie tylko klawisza: Enter lub spacji, a inne należy ignorować.

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

const observable = fromEvent(document, 'keydown').pipe(
    map(event => event.code),
    filter(code => code === 'Enter' || code === 'Space')
);

observable.subscribe(console.log);

Wyświetli Enter po wciśnięciu klawisza Enter. Lub Space po wciśnięci spacji. Dla innych klawiszy nic się nie wyświetli.