There are several, specialized From variants in RxJS:
In RxJS, the from
operator converts an array-like or iterable object into an Observable that emits the items in that array or iterable. A String, in this context, is treated as an array of characters.
This operator also takes three additional, optional parameters:
// Array-like object (arguments) to Observable function f() { return Rx.Observable.from(arguments); } f(1, 2, 3).subscribe( function (x) { console.log('Next: ' + x); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); });
Next: 1 Next: 2 Next: 3 Completed
// Any iterable object... // Set var s = new Set(['foo', window]); Rx.Observable.from(s).subscribe( function (x) { console.log('Next: ' + x); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); });
Next: foo Next: window Completed
// Map var m = new Map([[1, 2], [2, 4], [4, 8]]); Rx.Observable.from(m).subscribe( function (x) { console.log('Next: ' + x); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); });
Next: [1, 2] Next: [2, 4] Next: [4, 8] Completed
// String Rx.Observable.from("foo").subscribe( function (x) { console.log('Next: ' + x); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); });
Next: f Next: o Next: o Completed
// Using an arrow function as the map function to manipulate the elements Rx.Observable.from([1, 2, 3], function (x) { return x + x; }).subscribe( function (x) { console.log('Next: ' + x); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); });
Next: 2 Next: 4 Next: 6 Completed
// Generate a sequence of numbers Rx.Observable.from({length: 5}, function(v, k) { return k; }).subscribe( function (x) { console.log('Next: ' + x); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); });
Next: 0 Next: 1 Next: 2 Next: 3 Next: 4 Completed
from
is found in the following distributions:
rx.js
rx.all.js
rx.all.compat.js
rx.compat.js
rx.lite.js
rx.lite.compat.js
The fromCallback
operator takes a function as a parameter, calls this function, and emits the value returned from it as its single emission.
This operator also takes two additional, optional parameters:
var fs = require('fs'), Rx = require('rx'); // Wrap fs.exists var exists = Rx.Observable.fromCallback(fs.exists); // Check if file.txt exists var source = exists('file.txt'); var subscription = source.subscribe( function (x) { console.log('Next: ' + x); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); });
Next: true Completed
fromCallback
is found in the following distributions:
rx.all.js
rx.all.compat.js
rx.async.js
(requires rx.binding.js
and either rx.js
or rx.compat.js
)rx.async.compat.js
(requires rx.binding.js
and either rx.js
or rx.compat.js
)rx.lite.js
rx.lite.compat.js
There is also a fromNodeCallback
operator, which is specialized for the types of callback functions found in Node.js.
This operator takes three additional, optional parameters:
var fs = require('fs'), Rx = require('rx'); // Wrap fs.exists var rename = Rx.Observable.fromNodeCallback(fs.rename); // Rename file which returns no parameters except an error var source = rename('file1.txt', 'file2.txt'); var subscription = source.subscribe( function () { console.log('Next: success!'); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); });
Next: success! Completed
fromNodeCallback
is found in the following distributions:
rx.async.js
(requires rx.binding.js
and either rx.js
or rx.compat.js
)rx.async.compat.js
(requires rx.binding.js
and either rx.js
or rx.compat.js
)rx.lite.js
rx.lite.compat.js
The fromEvent
operator takes an “element” and an event name as parameters, and it then listens for events of that name taking place on that element. It returns an Observable that emits those events. An “element” may be a simple DOM element, or a NodeList, jQuery element, Zepto Element, Angular element, Ember.js element, or EventEmitter.
This operator also takes an optional third parameter: a function that accepts the arguments from the event handler as parameters and returns an item to be emitted by the resulting Observable in place of the event.
Sample Code// using a jQuery element var input = $('#input'); var source = Rx.Observable.fromEvent(input, 'click'); var subscription = source.subscribe( function (x) { console.log('Next: Clicked!'); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); }); input.trigger('click');
Next: Clicked!
// using a Node.js EventEmitter and the optional third parameter var EventEmitter = require('events').EventEmitter, Rx = require('rx'); var eventEmitter = new EventEmitter(); var source = Rx.Observable.fromEvent( eventEmitter, 'data', function (first, second) { return { foo: first, bar: second }; }); var subscription = source.subscribe( function (x) { console.log('Next: foo -' + x.foo + ', bar -' + x.bar); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); }); eventEmitter.emit('data', 'baz', 'quux');
Next: foo - baz, bar - quux
fromEvent
is found in the following distributions:
rx.async.js
(requires rx.binding.js
and either rx.js
or rx.compat.js
)rx.async.compat.js
(requires rx.binding.js
and either rx.js
or rx.compat.js
)rx.lite.js
rx.lite.compat.js
The fromEventPattern
operator is similar, except that instead of taking an element and an event name as parameters, it takes two functions as parameters. The first function attaches an event listener to a variety of events on a variety of elements; the second function removes this set of listeners. In this way you can establish a single Observable that emits items representing a variety of events and a variety of target elements.
var input = $('#input'); var source = Rx.Observable.fromEventPattern( function add (h) { input.bind('click', h); }, function remove (h) { input.unbind('click', h); } ); var subscription = source.subscribe( function (x) { console.log('Next: Clicked!'); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); }); input.trigger('click');
Next: Clicked!
The of
operator accepts a number of items as parameters, and returns an Observable that emits each of these parameters, in order, as its emitted sequence.
var source = Rx.Observable.of(1,2,3); var subscription = source.subscribe( function (x) { console.log('Next: ' + x); }, function (err) { console.log('Error: ' + err); }, function () { console.log('Completed'); });
Next: 1 Next: 2 Next: 3 Completed
of
is found in the following distributions:
rx.js
rx.all.js
rx.all.compat.js
rx.compat.js
rx.lite.js
rx.lite.compat.js
A variant of this operator, called ofWithScheduler
takes a Scheduler as its first parameter, and operates the resulting Observable on this Scheduler.
There is also a fromPromise
operator that converts a Promise into an Observable, converting its resolve
calls into onNext
notifications, and its reject
calls into onError
notifications.
fromPromise
is found in the following distributions:
rx.async.js
(requires rx.binding.js
and either rx.js
or rx.compat.js
)rx.async.compat.js
(requires rx.binding.js
and either rx.js
or rx.compat.js
)rx.lite.js
rx.lite.compat.js
var promise = new RSVP.Promise(function (resolve, reject) { resolve(42); }); var source = Rx.Observable.fromPromise(promise); var subscription = source.subscribe( function (x) { console.log('Next: ' + x); }, function (e) { console.log('Error: ' + e); }, function ( ) { console.log('Completed'); });
var promise = new RSVP.Promise(function (resolve, reject) { reject(new Error('reason')); }); var source = Rx.Observable.fromPromise(promise); var subscription = source.subscribe( function (x) { console.log('Next: ' + x); }, function (e) { console.log('Error: ' + e); }, function ( ) { console.log('Completed'); });
There is also an ofArrayChanges
operator that monitors an Array with the Array.observe
method, and returns an Observable that emits any changes that take place in the array. This operator is found only in the rx.all.js
distribution.
var arr = [1,2,3]; var source = Rx.Observable.ofArrayChanges(arr); var subscription = source.subscribe( function (x) { console.log('Next: ' + x); }, function (e) { console.log('Error: ' + e); }, function ( ) { console.log('Completed'); }); arr.push(4)
Next: {type: "splice", object: Array[4], index: 3, removed: Array[0], addedCount: 1}
A similar operator is ofObjectChanges
. It returns an Observable that emits any changes made to a particular object, as reported by its Object.observe
method. It is also found only in the rx.all.js
distribution.
var obj = {x: 1}; var source = Rx.Observable.ofObjectChanges(obj); var subscription = source.subscribe( function (x) { console.log('Next: ' + x); }, function (e) { console.log('Error: ' + e); }, function ( ) { console.log('Completed'); }); obj.x = 42;
Next: {type: "update", object: Object, name: "x", oldValue: 1}
There is also a pairs
operator. This operator accepts an Object, and returns an Observable that emits, as key/value pairs, the attributes of that object.
var obj = { foo: 42, bar: 56, baz: 78 }; var source = Rx.Observable.pairs(obj); var subscription = source.subscribe( function (x) { console.log('Next: ' + x); }, function (e) { console.log('Error: ' + e); }, function ( ) { console.log('Completed'); });
Next: ['foo', 42] Next: ['bar', 56] Next: ['baz', 78] Completed
pairs
is found in the following distributions:
rx.js
rx.all.js
rx.all.compat.js
rx.compat.js
rx.lite.js
rx.lite.compat.js
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4