84 RX – Creare Observable con promise lato browser

Pubblicato il di

Vediamo lo stesso esempio della scorsa lezione, ma senza l’ausilio di node.js e quindi utilizzando il browser, ecco il codice precedente

const apiurl = 'https://jsonplaceholder.typicode.com/albums';
const {switchMap} = require('rxjs/operators');
const {from, of} = require('rxjs');
const fetch = require('node-fetch');

const promise = fetch(apiurl).then(body => body.json())
//.then(res => console.log(res));

from(promise).pipe(
    switchMap( //resData => from(resData)
        resData => of(...resData) )
).subscribe(res => console.log(res));

Creiamo in FROM il file albums.html e inseriamo l’HTML pulito preso dal vecchio file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RxJS albums</title>
    <script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>
</head>
<body>

<script src="albums.js"></script>

</body>
</html>

Importiamo il file album.js che creiamo e dove copiamo il precedente codice preso da promise.js. Modifichiamo l’importazione del from e of destrutturandoli dall’oggetto globale rxjs e lo switchMap dall’oggetto rxjs.operators

const {switchMap} = rxjs.operators;
const {from, of} = rxjs;

Inoltre non dobbiamo importare la libreria fetch, perchè nel browser è nativa, quindi la eliminiamo.

Ora apriamo il file HTML col browser e in console dovremmo poter vedere i flussi di dati dei nostri albums come oggetti. Se per esempio volessimo vedere solo il titolo dell’album, possiamo utilizzare l’operatore map

from(promise).pipe(
    switchMap(resData => of(...resData) ),
    map(album => album.title)
).subscribe(res => console.log(res));

map come avevamo visto, permette di mappare di ogni elemento (che chiamiamo album) una proprietà nel nostro caso album.title. Se analizziamo la console avremo l’elenco dei titoli, ora dobbiamo creare una funzione che prenda questi titoli e li inserisca nella nostra pagina. Passiamo tale funzione al subscribe al posto della console

.subscribe(createAlbumList);

createAlbumList riceverà il flusso dei titoli. Creiamo la funzione

function createAlbumList(title) {
    const ul = document.querySelector('#albums');
    if(ul) {
        const li = document.createElement('li');
        li.texContent = title;
        ul.appendChild(li);
    }
}