RxJS Promise: Requests Set of Quantum Random Numbers

Example of processing a remote data request through aRxJS stream.

by Lou Mauget

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<h4>RxJS Promise: Get 300 Quantum Random Numbers</h4>
<p>Ref: <a target="_blank" href="http://qrng.anu.edu.au/index.php">http://qrng.anu.edu.au/index.php</a></p>
<button id="button">Refresh</button>
<p id="result"></p>

CSS

body {
  font-family: "Arial", sans-serif;
}

.working {
  color: #ff0000;
}

#result {
  color: #0000ff;
}

JavaScript

var $button = $('#button'),
  $result = $('#result');

// AJAX fn: returns observable promise
var getNumbers = function( count ) {
  return Rx.Observable.fromPromise(
    // Get promise of: {"type":"uint8","length":1,"data":[99],"success":true}
    $.ajax({
      url: `https://qrng.anu.edu.au/API/jsonI.php?length=${count}&type=uint8`
    })
    .promise());
};

// Observe button click, subscribe to result
Rx.Observable.fromEvent($button.get(0), 'click')
  .map( function( e ) {
    $result.html('<span class="working">(working)</span>');
    return e.target.value;
  }).flatMap(getNumbers(300))
  .subscribe( function( d ) {
    var sep = '';
    console.log(d);
    if (d.success) {
      $result.empty();
      d.data.forEach( function( v ) {
        $result.append(sep + v);
        sep = ', ';
      });
    }
  });

$button.trigger('click');