RXJS flatmap examples

by Shashi Kumar Nagulakonda

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.2/rx.all.js"></script>
<div id="result"></div>

CSS

div {
    margin-bottom:5px;
}

JavaScript

function trace(output)
{
   var newDiv = document.createElement("div"); 
   var newContent = document.createTextNode(output); 
   newDiv.appendChild(newContent); 
   element=document.getElementById("result");
   element.appendChild(newDiv); 
}

trace('using a range');

var source = Rx.Observable
    .range(1, 2)
    .selectMany(function (x) {
        return Rx.Observable.range(x, 2);
    });

var subscription = source.subscribe(
    function (x) {
        trace('Next: ' + x);
    },
    function (err) {
        trace('Error: ' + err);
    },
    function () {
        trace('Completed');
    }
);

trace("using an array");

var source = Rx.Observable.of(1,2,3)
  .flatMap(
    function (x, i) { return [x,i]; },
    function (x, y, ix, iy) { return {x, y, ix, iy}; }
  );

var subscription = source.subscribe(
    function (x) {
        trace('Next: x = ' + x.x + " y = " + x.y + " ix = " + x.ix + " iy = " + x.iy);
    },
    function (err) {
        trace('Error: ' + err);
    },
    function () {
        trace('Completed');
    }
);

                                      
trace("using a resolved promise");

var source = Rx.Observable.of(1,2,3,4)
    .selectMany(function (x, i) {
        return Promise.resolve(x*2);
    });

var subscription = source.subscribe(
    function (x) {
        trace('Next: ' + x);
    },
    function (err) {
        trace('Error: ' + err);
    },
    function () {
        trace('Completed');
    }
);

trace("executed after promise observable");