title: Rx.js: get all results as array from promise lists
body: <p>Here's the demo:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var availableNews$ = Rx.Observable.fromPromise(fetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty').then(res =&gt; res.json()));
  var pager$ = new Rx.Subject();
  var fetchedNews$ = Rx.Observable.combineLatest(availableNews$, pager$, (news, pager) =&gt; news.slice((pager.current - 1) * pager.items_per_page, pager.items_per_page))
      .flatMap(id =&gt; id)
      .map(id =&gt; Rx.Observable.fromPromise(fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`).then(res =&gt; res.json()))
      .concatMap(res =&gt; res));
  pager$.subscribe(v =&gt; {
    console.log(v);
    document.querySelector('#pager').textContent = JSON.stringify(v);
  });
  fetchedNews$.subscribe(x =&gt; { 
    console.log(x);
    document.querySelector('#news').textContent = JSON.stringify(x);;
  })
  pager$.next({current: 1, items_per_page: 10})</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"&gt;&lt;/script&gt;
  pager: &lt;p id="pager"&gt;&lt;/p&gt;
  news: &lt;p id="news"&gt;&lt;/p&gt;
  &lt;p&gt;the news return obserable instance instead of &lt;em&gt;array of fetched news&lt;/em&gt; which is desired&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I do these things in code:</p>
  
  <p>1, fetch top news feeds (availableNews$)</p>
  
  <p>2, use pager to limit which feeds should be fetch (pager$)</p>
  
  <p>3, fetch news which should be a array (fetchedNews$)</p>
  
  <p>But I stunk at step 3, the results returned is the stream of each promiseObserable, not result of each promise concated as a array.</p>
  
  <p>Thanks for help ^_^</p>
  
  <p>--Edited--</p>
  
  <p>I ask this question as <a href="https://github.com/ReactiveX/rxjs/issues/1982#issuecomment-249835663" rel="nofollow">issue</a> for the rxjs on github, and get a better solution. Here's the code:</p>
  
  <pre><code>const { Observable } = Rx;
  const { ajax: { getJSON }} = Observable;
  
  var availableNews$ = getJSON('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty');
  var pager$ = new Rx.Subject();
  var fetchedNews$ = Observable
    .combineLatest(availableNews$, pager$, (news, {current, items_per_page}) =&gt; {
      return news.slice((current - 1) * items_per_page, items_per_page);
    })
    .switchMap((ids) =&gt; Observable.forkJoin(ids.map((id) =&gt; {
      return getJSON(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`);
    })));
  
  pager$.subscribe(v =&gt; {
    document.querySelector('#pager').textContent = JSON.stringify(v);
  });
  
  fetchedNews$.subscribe(stories =&gt; {
     document.querySelector('#news').textContent = JSON.stringify(stories);  
  });
  
  pager$.next({current: 1, items_per_page: 10})
  </code></pre>