RxJs Query

Demonstration Part III

by reesewill

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.1.0/rxjs.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

</div>

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

SCSS

.result {
  line-height: 1.5em;
  margin: 0;
}
.container {
  border: 2px solid black;
  min-height: 200px;
  width: 200px;
  background-color: #ddd;
}

JavaScript

var $container = $('.container');
var interval$ = Rx.Observable.interval(1000).concatMap(function() {
	return Rx.Observable.fromPromise($.post('/echo/json/'));
});

var subscription = interval$.map(function(e) {
	// server returns {}
  var val = Math.floor(Math.random() * 10);
  
  if (val === 9) {
  	appendResult('Stream Ended');
    subscription.unsubscribe();
  } else {
		return "Result: " + val;
  }
}).subscribe(function(e) {
	appendResult(e);
});

function appendResult(value) {
	$('<p>').addClass('result').text(value).appendTo($container);
}