RxJS: The From Operator

Most often the from operator is used to convert an array to an observable:

let myArr = ['🐦', '😺', '🐕', '🐊'];

Rx.Observable
  .from(myArr)
  .filter(x => x !== '🐦')
  .map(x => `Hello ${x}!`)
  .subscribe(console.log);

  // Hello 😺!
  // Hello 🐕!
  // Hello 🐊!

Synchronous vs Asynchronous

By default the from operator returns a synchronous observable:

let myArr = ['😺', '🐕', '🐊'];

console.log('Before');
Rx.Observable
  .from(myArr)
  .map(x => `Hello ${x}!`)
  .subscribe(console.log);
console.log('After');

// Before
// Hello 😺!
// Hello 🐕!
// Hello 🐊!
// After

If you want however, you can make it asynchronous using an async scheduler:

let myArr = ['😺', '🐕', '🐊'];

console.log('Before');
Rx.Observable
  .from(myArr, Rx.Scheduler.async)
  .map(x => `Hello ${x}!`)
  .subscribe(console.log);
console.log('After');

// Before
// After
// Hello 😺!
// Hello 🐕!
// Hello 🐊!

Generator functions are an iterable type, so they can also be transformed to an observable using the from operator. Here’s a simple example:

function* generateUnique() {
  let num = 0;
  while (true) {
    yield num++;
  }
}

Rx.Observable.from(generateUnique())
  .take(3)
  .subscribe(console.log);

  // 0
  // 1
  // 2

And here’s a slightly more complex example that also uses the zip operator to combine the values of multiple observables:

function* generateName() {
  yield 'Cat';
  yield 'Dog';
  yield 'Bird';
  return;
}

function* generateEmoji() {
  yield '😺';
  yield '🐕';
  yield '🐦';
  return;
}

function* generateSound() {
  yield 'Meow';
  yield 'Woof';
  yield 'Tweet';
  return;
}

const names = Rx.Observable.from(generateName());
const emojis = Rx.Observable.from(generateEmoji());
const sounds = Rx.Observable.from(generateSound());

const combined = Rx.Observable.zip(names, emojis, sounds, (name, emoji, sound) => {
  return `The ${name} ${emoji} goes ${sound.toUpperCase()}`;
})
.subscribe(console.log);

// The Cat 😺 goes MEOW
// The Dog 🐕 goes WOOF
// The Bird 🐦 goes TWEET

Promises can also easily be transformed into observables, which will be asynchronous and wrap the resolved or rejected value:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello');
  }, 2000);
});

Rx.Observable
  .from(myPromise)
  .subscribe(x => console.log(x, ' World!'));

// Hello World! (after 2 seconds)

Here’s a quick example where a collection of 3 DOM nodes are transformed into an observable and mapped over to extract only the textContent:

<h2>Hey,</h2>
<h2>Hello</h2>
<h2>Alligator!</h2>


<script>
  const h2s = document.querySelectorAll('h2');

  Rx.Observable.from(h2s)
    .map(h2 => h2.textContent)
    .subscribe(console.log);

    // Hey,
    // Hello
    // Alligator!
</script>

Strings can be iterated over, so the from operator can be used, but every character in the string will be a separate value:

Rx.Observable
  .from('Hi!')
  .subscribe(console.log);

  // H
  // i
  // !

Instead, to convert a string as a single value, you’ll want to use the of operator:

Rx.Observable
  .of('Hi!')
  .subscribe(console.log);

  // Hi!