How can I create an Observable from something else?

const { Observable } from Rx
const { from, of, pairs, fromEvent, fromPromise } = Observable
const { info } = console

// How can I create a stream of characters from a string
const word = 'abcde'
from(word).subscribe(char => info(char))

// How can I create a stream of strings from an array
const animals = ['ape', 'bat', 'cat']
from(animals).subscribe(animal => info(animal))

// How can I create a stream of name-value pairs from an object
const insects = { a: 'ant', b: 'bee', c: 'centipede'}
pairs(insects).subscribe(insect => info(insect))

// How can I create a stream of values from a list of numbers
of(1, 2, 3).subscribe(value => info(value))

// How can I create a stream of events from a click on a button
const button = document.querySelector('.btn')
fromEvent(button, 'click').subscribe(event => info('clicked'))

// How can I create an Observable from a Promise
const url = 'https://swapi.co/api/people/1'
fromPromise(fetch(url).then(response => response.json()))
  .subscribe(data => info(data))

// How can I get a count of total clicks accumulated so far
fromEvent(button, 'click').scan((x, y) => x + 1, 0).subscribe(count => info(count))

// How can I make multiple asynch requests
const ids = [1, 2, 3]
from(ids)
  .map(id => `https://swapi.co/api/people/${id}`)
  .flatMap(url => fetch(url))
  .flatMap(response => response.json())
  .subscribe(x => info(x.name))

// How can I create an Observable that returns custom values?
new Observable((observer) => {
  observer.next('first-value')
  observer.next('second-value')
  observer.complete()
  }).subscribe(value => info(value))

// What is the correct way to import RxJS to reduce page bloat?
import { Observable } from 'rxjs/Observable'

Last updated

Was this helpful?