RxJs Query with Button

Demonstration Part V

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>
<button class="end">Stop</button>
<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 button = document.querySelector('.end');
var interval$ = Rx.Observable.interval(1000).concatMap(function() {
	return Rx.Observable.fromPromise($.post('/echo/json/'));
});
var click = Rx.Observable.fromEvent(button, 'click');

var subscription = interval$.map(function(e) {
	// server returns {}
  var val = Math.floor(Math.random() * 10);
  
  return val;
}).takeUntil(click).map(function(e) {
	return "Result: " + e;
}).subscribe(function(e) {
	appendResult(e);
});

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