82 RX – Observable from – array

Pubblicato il di

Il metodo from ci permette di creare un observable da diversi stream di dati, tipo un array, una promise o anche un evento (come il click del mouse).

Creiamo una cartella FROM e il file index.js. Importiamo il from e visto che usiamo questi esempi lato node facciamo un require di rxjs 

const { from } = require('rxjs');

Anche se siamo in una cartella interna dove non è installato rxjs, siamo all’interno comunque della cartella RXJS dove c’è node_modules installati e dai quali preleviamo il from.

from array

Abbiamo detto che il from esegue lo stream dati da un array, quindi passiamo un array al from

from([1,2,3,4,5,6,7,8,9])

adesso agganciamo la subscribe che accetta una funzione la quale riceverà ogni elemento dell’array

const {from} = require('rxjs');

from([1,2,3,4,5,6,7,8,9]).subscribe(
    ele => console.log(ele)
);

se lanciamo il node index.js verranno mostrati tutti gli elementi dell’array.

Dato che con la subscribe ci viene restituito lo stream degli elementi contenuti nell’array, potrebbe essere utile, per esempio, concatenare l’operatore filter tramite il pipe, ma primo dobbiamo importare filter da rxjs operators

const {filter} = require('rxjs/operators');

ora possiamo applicar un filtro che ci restituisce i numeri pari, per esempio:

const {from} = require('rxjs');
const {filter} = require('rxjs/operators');

from([1,2,3,4,5,6,7,8,9]).pipe(
    filter(number => number%2 === 0 )
).subscribe(
    ele => console.log(ele)
);

possiamo aggiungere anche l’operatore map, importandolo, che, sempre come esempio, ci restituisce il quadrato di ogni numero. Ricordo che map esegue una funzione per ogni elemento che gli arriva

const {from} = require('rxjs');
const {filter, map} = require('rxjs/operators');

from([1,2,3,4,5,6,7,8,9]).pipe(
    filter(number => number%2 === 0 ),
    map(number => number*number)
).subscribe(
    ele => console.log(ele)
);

e otteniamo il quadrato dei numeri filtrati.

Possiamo aggiungere allo stesso modo qualsiasi operatore ci serva, per esempio eseguiamo un tap, che è una funzione di logging e che non restituisce valori nel flusso di codice, ma restituisce in console l’elemento che gli passa, nel nostro caso lo mettiamo prima del quadrato map

const {from} = require('rxjs');
const {filter, map, tap} = require('rxjs/operators');

from([1,2,3,4,5,6,7,8,9]).pipe(
    filter(number => number%2 === 0 ),
    tap(ele => console.log(ele)),
    map(number => number*number)
).subscribe(
    ele => console.log(ele)
);

e otteniamo:

2
4
4
16
6
36
8
64