Skip to content

Instantly share code, notes, and snippets.

@TimCodes
Created May 13, 2017 00:15
Show Gist options
  • Save TimCodes/baab6b3bf18c4ec98ba788239c7b6b7b to your computer and use it in GitHub Desktop.
Save TimCodes/baab6b3bf18c4ec98ba788239c7b6b7b to your computer and use it in GitHub Desktop.

Revisions

  1. TimCodes created this gist May 13, 2017.
    58 changes: 58 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>RxJS 5 Operators</title>
    <script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
    </head>
    <body>

    <script id="jsbin-javascript">
    "use strict";
    var subject = new Rx.Subject();
    // initilize window with values
    var slidingWindow = Rx.Observable.fromPromise(axios.get('http://jsonplaceholder.typicode.com/posts'))
    .map(function (response) { return response.data.slice(0, 2); })
    .switchMap(function (d) { return subject.startWith(d); })
    .scan(function (acc, curr) {
    acc.shift();
    acc.push(curr);
    return acc;
    });
    // push new values to window
    var timerPush = Rx.Observable.interval(2000)
    .map(function (d) { return axios.get("http://jsonplaceholder.typicode.com/posts/" + (Math.floor(Math.random() * (20 - 1 + 1)) + 1)); })
    .flatMap(function (d) { return d; })
    .map(function (d) { return d.data; })
    .map(function (d) { return subject.next(d); });
    timerPush.subscribe();
    var subscribe = slidingWindow.subscribe(function (val) { return console.log(val); });
    //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNiaW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJqc2Jpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsSUFBSSxPQUFPLEdBQUcsSUFBSSxFQUFFLENBQUMsT0FBTyxFQUFFLENBQUM7QUFFL0IsK0JBQStCO0FBQy9CLElBQU0sYUFBYSxHQUFFLEVBQUUsQ0FBQyxVQUFVLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsMkNBQTJDLENBQUMsQ0FBQztLQUN2RixHQUFHLENBQUMsVUFBVSxRQUFRLElBQUksTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztLQUM5RCxTQUFTLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFwQixDQUFvQixDQUFDO0tBQ3BDLElBQUksQ0FBQyxVQUFVLEdBQUcsRUFBRSxJQUFJO0lBQ3ZCLEdBQUcsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNaLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDZixNQUFNLENBQUMsR0FBRyxDQUFDO0FBQ2pCLENBQUMsQ0FBQyxDQUFBO0FBRVosNEJBQTRCO0FBQzVCLElBQU0sU0FBUyxHQUFTLEVBQUUsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQztLQUM1QixHQUFHLENBQUMsVUFBQSxDQUFDLElBQUcsT0FBQSxLQUFLLENBQUMsR0FBRyxDQUFDLGdEQUE2QyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxDQUFDLEVBQUUsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUUsQ0FBQyxFQUF0RyxDQUFzRyxDQUFFO0tBQ2hILE9BQU8sQ0FBQyxVQUFBLENBQUMsSUFBSSxPQUFBLENBQUMsRUFBRCxDQUFDLENBQUM7S0FDZixHQUFHLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxDQUFDLENBQUMsSUFBSSxFQUFOLENBQU0sQ0FBQztLQUNoQixHQUFHLENBQUMsVUFBQSxDQUFDLElBQUssT0FBQSxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUFmLENBQWUsQ0FBQyxDQUFBO0FBRWxELFNBQVMsQ0FBQyxTQUFTLEVBQUUsQ0FBQTtBQUNyQixJQUFNLFNBQVMsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFDLFVBQUEsR0FBRyxJQUFJLE9BQUEsT0FBTyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsRUFBaEIsQ0FBZ0IsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsidmFyIHN1YmplY3QgPSBuZXcgUnguU3ViamVjdCgpO1xuXG4vLyBpbml0aWxpemUgd2luZG93IHdpdGggdmFsdWVzXG5jb25zdCBzbGlkaW5nV2luZG93ID1SeC5PYnNlcnZhYmxlLmZyb21Qcm9taXNlKGF4aW9zLmdldCgnaHR0cDovL2pzb25wbGFjZWhvbGRlci50eXBpY29kZS5jb20vcG9zdHMnKSlcbiAgICAgICAgICAgICAgLm1hcChmdW5jdGlvbiAocmVzcG9uc2UpIHsgcmV0dXJuIHJlc3BvbnNlLmRhdGEuc2xpY2UoMCwgMik7IH0pXG4gICAgICAgICAgICAgIC5zd2l0Y2hNYXAoZCA9PiBzdWJqZWN0LnN0YXJ0V2l0aChkKSlcbiAgICAgICAgICAgICAgLnNjYW4oZnVuY3Rpb24gKGFjYywgY3Vycikge1xuICAgICAgICAgICAgICAgIGFjYy5zaGlmdCgpO1xuICAgICAgICAgICAgICAgIGFjYy5wdXNoKGN1cnIpO1xuICAgICAgICAgICAgICAgIHJldHVybiBhY2M7XG4gICAgICAgICAgfSlcblxuLy8gcHVzaCBuZXcgdmFsdWVzIHRvIHdpbmRvd1xuY29uc3QgdGltZXJQdXNoID0gICAgICAgUnguT2JzZXJ2YWJsZS5pbnRlcnZhbCgyMDAwKVxuICAgICAgICAgICAgICAgICAgICAgICAubWFwKGQ9PiBheGlvcy5nZXQoYGh0dHA6Ly9qc29ucGxhY2Vob2xkZXIudHlwaWNvZGUuY29tL3Bvc3RzLyR7TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogKDIwIC0gMSArIDEpKSArIDF9YCkgKVxuICAgICAgICAgICAgICAgICAgICAgICAuZmxhdE1hcChkID0+IGQpXG4gICAgICAgICAgICAgICAgICAgICAgIC5tYXAoZCA9PiBkLmRhdGEpXG4gICAgICAgICAgICAgICAgICAgICAgIC5tYXAoZCA9PiAgc3ViamVjdC5uZXh0KGQpKVxuXG50aW1lclB1c2guc3Vic2NyaWJlKClcbmNvbnN0IHN1YnNjcmliZSA9IHNsaWRpbmdXaW5kb3cuc3Vic2NyaWJlKHZhbCA9PiBjb25zb2xlLmxvZyh2YWwpKTsiXX0=
    </script>



    <script id="jsbin-source-javascript" type="text/javascript">var subject = new Rx.Subject();

    // initilize window with values
    const slidingWindow =Rx.Observable.fromPromise(axios.get('http://jsonplaceholder.typicode.com/posts'))
    .map(function (response) { return response.data.slice(0, 2); })
    .switchMap(d => subject.startWith(d))
    .scan(function (acc, curr) {
    acc.shift();
    acc.push(curr);
    return acc;
    })

    // push new values to window
    const timerPush = Rx.Observable.interval(2000)
    .map(d=> axios.get(`http://jsonplaceholder.typicode.com/posts/${Math.floor(Math.random() * (20 - 1 + 1)) + 1}`) )
    .flatMap(d => d)
    .map(d => d.data)
    .map(d => subject.next(d))

    timerPush.subscribe()
    const subscribe = slidingWindow.subscribe(val => console.log(val));</script></body>
    </html>
    20 changes: 20 additions & 0 deletions jsbin.lucaru.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    "use strict";
    var subject = new Rx.Subject();
    // initilize window with values
    var slidingWindow = Rx.Observable.fromPromise(axios.get('http://jsonplaceholder.typicode.com/posts'))
    .map(function (response) { return response.data.slice(0, 2); })
    .switchMap(function (d) { return subject.startWith(d); })
    .scan(function (acc, curr) {
    acc.shift();
    acc.push(curr);
    return acc;
    });
    // push new values to window
    var timerPush = Rx.Observable.interval(2000)
    .map(function (d) { return axios.get("http://jsonplaceholder.typicode.com/posts/" + (Math.floor(Math.random() * (20 - 1 + 1)) + 1)); })
    .flatMap(function (d) { return d; })
    .map(function (d) { return d.data; })
    .map(function (d) { return subject.next(d); });
    timerPush.subscribe();
    var subscribe = slidingWindow.subscribe(function (val) { return console.log(val); });
    //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNiaW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJqc2Jpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsSUFBSSxPQUFPLEdBQUcsSUFBSSxFQUFFLENBQUMsT0FBTyxFQUFFLENBQUM7QUFFL0IsK0JBQStCO0FBQy9CLElBQU0sYUFBYSxHQUFFLEVBQUUsQ0FBQyxVQUFVLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsMkNBQTJDLENBQUMsQ0FBQztLQUN2RixHQUFHLENBQUMsVUFBVSxRQUFRLElBQUksTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztLQUM5RCxTQUFTLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFwQixDQUFvQixDQUFDO0tBQ3BDLElBQUksQ0FBQyxVQUFVLEdBQUcsRUFBRSxJQUFJO0lBQ3ZCLEdBQUcsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNaLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDZixNQUFNLENBQUMsR0FBRyxDQUFDO0FBQ2pCLENBQUMsQ0FBQyxDQUFBO0FBRVosNEJBQTRCO0FBQzVCLElBQU0sU0FBUyxHQUFTLEVBQUUsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQztLQUM1QixHQUFHLENBQUMsVUFBQSxDQUFDLElBQUcsT0FBQSxLQUFLLENBQUMsR0FBRyxDQUFDLGdEQUE2QyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxDQUFDLEVBQUUsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUUsQ0FBQyxFQUF0RyxDQUFzRyxDQUFFO0tBQ2hILE9BQU8sQ0FBQyxVQUFBLENBQUMsSUFBSSxPQUFBLENBQUMsRUFBRCxDQUFDLENBQUM7S0FDZixHQUFHLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxDQUFDLENBQUMsSUFBSSxFQUFOLENBQU0sQ0FBQztLQUNoQixHQUFHLENBQUMsVUFBQSxDQUFDLElBQUssT0FBQSxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUFmLENBQWUsQ0FBQyxDQUFBO0FBRWxELFNBQVMsQ0FBQyxTQUFTLEVBQUUsQ0FBQTtBQUNyQixJQUFNLFNBQVMsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFDLFVBQUEsR0FBRyxJQUFJLE9BQUEsT0FBTyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsRUFBaEIsQ0FBZ0IsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsidmFyIHN1YmplY3QgPSBuZXcgUnguU3ViamVjdCgpO1xuXG4vLyBpbml0aWxpemUgd2luZG93IHdpdGggdmFsdWVzXG5jb25zdCBzbGlkaW5nV2luZG93ID1SeC5PYnNlcnZhYmxlLmZyb21Qcm9taXNlKGF4aW9zLmdldCgnaHR0cDovL2pzb25wbGFjZWhvbGRlci50eXBpY29kZS5jb20vcG9zdHMnKSlcbiAgICAgICAgICAgICAgLm1hcChmdW5jdGlvbiAocmVzcG9uc2UpIHsgcmV0dXJuIHJlc3BvbnNlLmRhdGEuc2xpY2UoMCwgMik7IH0pXG4gICAgICAgICAgICAgIC5zd2l0Y2hNYXAoZCA9PiBzdWJqZWN0LnN0YXJ0V2l0aChkKSlcbiAgICAgICAgICAgICAgLnNjYW4oZnVuY3Rpb24gKGFjYywgY3Vycikge1xuICAgICAgICAgICAgICAgIGFjYy5zaGlmdCgpO1xuICAgICAgICAgICAgICAgIGFjYy5wdXNoKGN1cnIpO1xuICAgICAgICAgICAgICAgIHJldHVybiBhY2M7XG4gICAgICAgICAgfSlcblxuLy8gcHVzaCBuZXcgdmFsdWVzIHRvIHdpbmRvd1xuY29uc3QgdGltZXJQdXNoID0gICAgICAgUnguT2JzZXJ2YWJsZS5pbnRlcnZhbCgyMDAwKVxuICAgICAgICAgICAgICAgICAgICAgICAubWFwKGQ9PiBheGlvcy5nZXQoYGh0dHA6Ly9qc29ucGxhY2Vob2xkZXIudHlwaWNvZGUuY29tL3Bvc3RzLyR7TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogKDIwIC0gMSArIDEpKSArIDF9YCkgKVxuICAgICAgICAgICAgICAgICAgICAgICAuZmxhdE1hcChkID0+IGQpXG4gICAgICAgICAgICAgICAgICAgICAgIC5tYXAoZCA9PiBkLmRhdGEpXG4gICAgICAgICAgICAgICAgICAgICAgIC5tYXAoZCA9PiAgc3ViamVjdC5uZXh0KGQpKVxuXG50aW1lclB1c2guc3Vic2NyaWJlKClcbmNvbnN0IHN1YnNjcmliZSA9IHNsaWRpbmdXaW5kb3cuc3Vic2NyaWJlKHZhbCA9PiBjb25zb2xlLmxvZyh2YWwpKTsiXX0=