Categories
JavaScript Rxjs

Rxjs Filtering Operators — Sample, Skip and Single

Spread the love

RxJS is a library for doing reactive programming. Creating operators are useful for generating data from various data sources to be subscribed to by Observers.

In this article, we’ll look at some filtering operators, including sample, sampleTime,skip, single, and skipLast operators.

sample

The sample operator returns an Observable that emits the value from the source Observable when the notifier Observable emits.

It takes one argument, which is the notifer Observable.

For example, we can use it as follows:

import { interval } from "rxjs";  
import { sample } from "rxjs/operators";
const seconds = interval(1000);  
const result = seconds.pipe(sample(interval(5000)));  
result.subscribe(x => console.log(x));

In the code above, we have the seconds Observable which emits a number every second. Then we pipe the result of it to the sample operator, where we set the notifier Observable which is interval(5000), which emits every 5 seconds.

Therefore, we have a new Observable that emits values from seconds every 5 seconds.

We should see every few values from seconds logged.

sampleTime

The sampleTime operator emits the most recently emitted value from the source Observable in periodic intervals.

It takes up to 2 arguments. The first is the period, which is the period to wait until emitting a value from the source Observable. It’s measured in milliseconds or the time unit of the optional scheduler .

The second argument is the optional scheduler, which defaults to async.

It returns a new Observable that emits value from the source Observable in a specified time interval.

For example, we can use it as follows:

import { interval } from "rxjs";  
import { sampleTime } from "rxjs/operators";
const seconds = interval(1000);  
const result = seconds.pipe(sampleTime(5000));  
result.subscribe(x => console.log(x));

The code above takes the values emitted from the seconds Observable and pipe it to the sampleTime operator, which will emit values from seconds every 5 seconds.

The result will be that we get values emitted from the result Observable, which gets its values from the seconds Observable, every 5 seconds.

We should see some numbers logged from the console.log .

single

single returns an Observable that emits the single item from the source Observable that matches a given condition returned by the predicate function.

If the source Observable emits more than one of such item or no items, then we get IllegalArgumentException or NoSuchElementException respectively.

If the source Observable emits items but none match the condition in the predicate function then undefined is emitted.

It takes one argument, which is the predicate function that returns the condition to match the item emitted from the source Observable.

For example, if we have:

import { of } from "rxjs";  
import { single } from "rxjs/operators";
const numbers = of(1).pipe(single());  
numbers.subscribe(x => console.log(x));

Then we get 1 logged.

If we have:

import { of } from "rxjs";  
import { single } from "rxjs/operators";
const numbers = of(1, 2).pipe(single());  
numbers.subscribe(x => console.log(x));

Then we get the error “Sequence contains more than one element” logged.

If we have:

import { of } from "rxjs";  
import { single } from "rxjs/operators";
const numbers = of(1, 2).pipe(single(x => x % 2 === 0));  
numbers.subscribe(x => console.log(x));

Then we get 2 logged since 2 matches the condition x => x % 2 === 0 .

skip

The skip operator returns an Observable that skips the first count items emitted by the source Observable and emit the rest.

It takes the required count argument, which is the number of items from the source Observable to skip.

For example, if we have:

import { of } from "rxjs";  
import { skip } from "rxjs/operators";

const numbers = of(1, 2, 3, 4, 5).pipe(skip(2));  
numbers.subscribe(x => console.log(x));

Then we get:

3  
4  
5

logged because we specified that we want to skip the first 2 emitted values from of(1, 2, 3, 4, 5) .

skipLast

The skipLast operator returns an Observable that skips the last count values emitted from the source Observable.

It takes the required count argument, which is the number of items from the source Observable to skip from the end of the source Observable.

For example, we can write:

import { of } from "rxjs";  
import { skipLast } from "rxjs/operators";

const numbers = of(1, 2, 3, 4, 5).pipe(skipLast(2));  
numbers.subscribe(x => console.log(x));

Then we get:

1  
2  
3

logged since we specified that we want to skip the last 2 emitted values.

The sample and sampleTime operators return an Observable that emits the value from the source Observable when the notifier Observable emits or at the specified time interval respectively.

single returns an Observable that emits the single item from the source Observable that matches a given condition.

The skip operator returns an Observable that skips the number of items at the start of emitting the values from the Observable.

Finally, skipLast operator returns an Observable that skips the last number of values emitted from the source Observable.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *