flatMap for inner Observable
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")
);
<!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>