<input type="number" min="1" max="10" step="1" placeholder="ID">
<select>
<option selected hidden> -- select an option -- </option>
<option value="posts">posts</option>
<option value="albums">albums</option>
<option value="todos">todos</option>
</select>
<output></output>
const input = document.querySelector("input");
const select = document.querySelector("select");
const output = document.querySelector("output");
const id$ = Rx.Observable
.fromEvent(input, "input")
.map(e => e.target.value);
const resource$ = Rx.Observable
.fromEvent(select, "change")
.map(e => e.target.value);
Rx.Observable
.combineLatest(id$, resource$)
.switchMap(getResources)
.subscribe(render);
function getResources([id, resource]) {
return Rx.Observable.ajax(
`https://jsonplaceholder.typicode.com/${resource}?userId=${id}`
);
}
function render(res) {
output.innerHTML = "";
const articles = document.createDocumentFragment();
for (const post of res.response) {
const article = document.createElement("article");
const h1 = document.createElement("h1");
const p = document.createElement("p");
h1.textContent = post.title;
article.appendChild(h1);
p.textContent = post.body;
article.appendChild(p);
articles.appendChild(article);
}
output.appendChild(articles);
}
This Pen doesn't use any external CSS resources.