RxJS Observable Demo

by brnvndr

HTML

<h1>
RxJS Observable Demo
</h1>
<hr />

<h2>
Creating an Observable from an array
</h2>
<span id="nameOutput"></span>
<hr />

<h2>
Manually create an observable and subscribe
</h2>
<p>
The subscription values will not be identical, as each subscription starts a new instance of function(observer){}
</p>

<p>
    <label>Subscription #1</label>
    <span id="subscriptionOneOutput"></span>
</p>

<p>
    <label>Subscription #2</label>
    <span id="subscriptionTwoOutput"></span>
</p>

<hr />

<h2>
Observable .timer()
</h2>

<p> 
    <input type=button id="timerButton" value="pause" onclick="pauseTimer()" />
    <span id="timerOutput"></span>
</p>
<hr />

<h2>
 Create observable from event
</h2>
<p>
<Label>Enter text</Label>
<input id="textInput" />
</p>
<p>
<label>Text output:</label>
<span id="textOutput" cols="80" ></span>
</p>
<hr />

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.compat.min.js"></script>

JavaScript

//Creating an Observable from an array
var names = ["Brian", "Kit", "Mark"];
  
  Rx.Observable.from(names).subscribe(
  function(item){document.getElementById('nameOutput').innerHTML += item + ', '},	// onNext()
  {}, // onError()
  function (){document.getElementById('nameOutput').innerHTML += ' ...done!'} // onCompleted
  );

// Manually create an observable and subscribe

var source = Rx.Observable.create(function(observer){
    var itemsToEmit = 5;
    var itemsEmitted = 0;
    
    while (itemsEmitted < itemsToEmit){
        observer.onNext(Math.floor(Math.random() * (101-1) + 1));
        itemsEmitted += 1;
    }
    
    observer.onCompleted();
});
    
  var subscriptionOne = source.subscribe(
    function(emittedValue){
        document.getElementById('subscriptionOneOutput').innerHTML += emittedValue + ', ';
    }, // onNext()
    {}, // onError()
    function(){
        document.getElementById('subscriptionOneOutput').innerHTML += '... done!';
    }); // onCompleted()
 
var observer = Rx.Observer.create (function(emittedValue){
        document.getElementById('subscriptionTwoOutput').innerHTML += emittedValue + ', ';
    }, // onNext()
    {}, // onError()
    function(){
        document.getElementById('subscriptionTwoOutput').innerHTML += '... done!';
    }); // onCompleted()
 
var subscriptionTwo = source.subscribe(observer); 
    
// Observable .timer()
var pauser = new Rx.Subject();
var observableTimer = Rx.Observable.timer(1250,1250).pausable(pauser);
var subscriptionTimer = observableTimer.subscribe( x => document.getElementById('timerOutput').innerHTML += x + ' ' );

observableTimer.resume();

function pauseTimer(){
    var state = document.getElementById('timerButton').value;
    
    if (state === 'pause')
    {
    		observableTimer.pause();
        document.getElementById('timerButton').value = 'resume';
    }
    else {
        observableTimer.resume(); // this actually starts the index count over again
       ...