Rx Js Promises

by Preetha Srinivasan

HTML

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
<input type="text" id="searchTxt"/>

<button id="startSearch">
Search
</button>
<h4>
Results
</h4>
<div id="result1"></div>
<div id="result2"></div>


</div>

CSS

body {
  font-size:12px;
}

JavaScript

function getObservable() {
 const getData = val => new Promise(resolve => setTimeout(() => {resolve(`Promise Resolved:    ${val}`);
  }, 500));
 const observable = Rx.Observable
        //turn promise into observable
        .fromPromise(getData($('#searchTxt').val()));
        
 return observable;
}


function initSubscribers() {
 const observable = getObservable()
  //side effects will be executed once
  .do(() => console.log('Init observable'))
  .publish();
 const subscribe1 = observable.subscribe(val => callback1(val)); 
 const subscribe2 = observable.subscribe(val => callback2(val)); 
 return observable;
} 

function callback1(val){
  $("#result1").text('Callback1 : ' + val);
}

function callback2(val){
  $("#result2").text('Callback2 : ' + val);
}

function startSearch(){
  const subscriber = initSubscribers();
  // unless we call connect the observables will not be loaded with data
  subscriber.connect();
}

$( "#startSearch" ).click(function() {
  startSearch();
});