JSFiddle - React, Tailwind, and code Playground

by johnsonjo4531

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
<script src="//jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<div>
  <input id="input1" type="text">
  <button id="data1">Submit</button>
</div>

JavaScript

console.clear();

var data1Click$ = Rx.Observable.fromEvent(document.getElementById('data1'), 'click').map(function () {
  return document.getElementById('input1').value
});

data1Click$
 .flatMap(function (data) {
    return getAjax(data, 100, [100, 300]);
  })
  .flatMapLatest(function (data) {
  	return grabManyIndividual(data);
  })/* */
  .subscribe((data) => displayData(data));

// replace this with ajax call to get all data
function getAjax (queryData, count, range) {
	range = range || [100, 300];
  return new Promise(function (resolve) {
    setTimeout(function () {
      var result = []; 
      for(var i = 1; i <= (count || 100); ++i) {
         result.push("" + queryData + " " + i);
       }
      resolve(result);
    }, getRandomIntInclusive(...range));
  });
}

function grabManyIndividual (data) {
  return Rx.Observable.from(data).flatMap(function (datum) {
    return getAjax(datum, 1, [2000, 20000])
      .then(function (datum) {
        return datum[0];
      });
  })
}

function displayData (data) {
  console.log(data);
}

function getRandomIntInclusive(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}