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);
}