Pulse7
8/19/2017 - 1:46 PM

flatMap for inner Observable

flatMap for inner Observable

main.ts
content_copyfile_download
import { Observable } from "rxjs";

let output = document.getElementById("output");
let button = document.getElementById("button");

let click = Observable.fromEvent(button, "click");

function load(url: string) {
    return Observable.create(observer => {
        let xhr = new XMLHttpRequest();

        xhr.addEventListener("load", () => {
            let data = JSON.parse(xhr.responseText);
            observer.next(data);
            observer.complete();
        });

        xhr.open("GET", url);
        xhr.send();
    })
}

function renderMovies(movies) {
    movies.forEach(m => {
        let div = document.createElement("div");
        div.innerHTML = m.title;
        output.appendChild(div);
    });
}

click.flatMap(e=>load("movies.json"))
    .subscribe(
        renderMovies,
        e=>console.log(e),
        ()=>console.log("complete")
    );
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #circle{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <button id="button">Get Movies</button>
    <div id="output"></div>
<script src="app.js"></script>
</body>
</html>