Rx Js fork join

by Preetha Srinivasan

HTML

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
<button id="listPosts">
List Posts
</button>
<h4>
Results
</h4>
<ul id="results">
</ul>

CSS

body {
  font-size:14px;
}

JavaScript

function getPromise(val){
 var promise = $.getJSON("https://jsonplaceholder.typicode.com/posts/" + val);
 return promise;
}

function getObservable(val) {
 const observable = Rx.Observable
        //turn promise into observable
        .fromPromise(getPromise(val));
 return observable;
}

function initSubscribers() {
 
 const observable1 = getObservable(1);
 const observable2 = getObservable(2);
 const observable3 = getObservable(3);
 
 const combinedObservable = Rx.Observable.forkJoin(
  observable1,observable2,observable3
 ).do(() => console.log('Init observable'))
  .publish();
 const subscribe = combinedObservable.subscribe(val => callback(val));  
 return combinedObservable;
} 

function callback(valArr){
$('#results').empty();
$.each(valArr, function( index, value ) {
  $("#results").append($("<li>").text(value.title));
 });
}

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

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