Rx.js：約束の配列が

Question

を示していますように、すべての結果を得るには、ここにデモです：

var availableNews$ = Rx.Observable.fromPromise(fetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty').then(res => res.json())); 
 
var pager$ = new Rx.Subject(); 
 
var fetchedNews$ = Rx.Observable.combineLatest(availableNews$, pager$, (news, pager) => news.slice((pager.current - 1) * pager.items_per_page, pager.items_per_page)) 
 
    .flatMap(id => id) 
 
    .map(id => Rx.Observable.fromPromise(fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`).then(res => res.json())) 
 
    .concatMap(res => res)); 
 
pager$.subscribe(v => { 
 
    console.log(v); 
 
    document.querySelector('#pager').textContent = JSON.stringify(v); 
 
}); 
 
fetchedNews$.subscribe(x => { 
 
    console.log(x); 
 
    document.querySelector('#news').textContent = JSON.stringify(x);; 
 
}) 
 
pager$.next({current: 1, items_per_page: 10})

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script> 
 
pager: <p id="pager"></p> 
 
news: <p id="news"></p> 
 
<p>the news return obserable instance instead of <em>array of fetched news</em> which is desired</p>

私はコードでこれらの事を実行します。

1、トップニュースのフィードを取得します（ AvailableNews $）

2、ページャを使用して、取得するフィードを制限します（ページャ$）

3、配列（fetchedNews $）でなければならないニュースを取得します。

私はステップ3でスタンプしましたが、各promiseObserableのストリームが配列として連結された結果ではありません。助けのための

おかげで^ _^

--Edited--

私はgithubの上rxjsためissueとして、この質問をして、よりよい解決策を得ます。コードは次のとおりです。

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}) => { 
    return news.slice((current - 1) * items_per_page, items_per_page); 
    }) 
    .switchMap((ids) => Observable.forkJoin(ids.map((id) => { 
    return getJSON(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`); 
    }))); 

pager$.subscribe(v => { 
    document.querySelector('#pager').textContent = JSON.stringify(v); 
}); 

fetchedNews$.subscribe(stories => { 
    document.querySelector('#news').textContent = JSON.stringify(stories); 
}); 

pager$.next({current: 1, items_per_page: 10}) 

Answer 1

2つまたは3つのエラーがあります。

最初に、combineLatest()のラムダは、ニュースIDの配列ではなく、配列を含む単一の項目で動作します。したがって、flatmap()は、concatMap()のように不要です。

第二に、あなたはcombineLatest()あなたはニュースがロードされるときfullfilledされる約束を与えるものではありませんしているが、availableNewsとページャがロードされると、

第三として、fetch()からObservableを作成する必要はありません。だから、ObservableをcombineLatest()とし、配列fetch()約束から3番目にする必要があります。説明し、コードの

var availableNews$ = Rx.Observable.fromPromise(fetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty').then(res => res.json())); 
 
var pager$ = new Rx.Subject(); 
 
var fetchedNews$ = Rx.Observable.combineLatest(availableNews$, pager$, (news, pager) => 
 
    Rx.Observable.combineLatest.apply(this, news.slice((pager.current - 1) * pager.items_per_page, pager.items_per_page) 
 
    .map(id => fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`).then(res => res.json())))); 
 

 
pager$.subscribe(v => { 
 
    document.querySelector('#pager').textContent = JSON.stringify(v); 
 
}); 
 

 
fetchedNews$.subscribe(x => { 
 
    x.subscribe(a => { 
 
    document.querySelector('#news').textContent = JSON.stringify(a); 
 
    }); 
 
}) 
 
pager$.next({current: 1, items_per_page: 10})

<script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script> 
 
pager: <p id="pager"></p> 
 
news: <p id="news"></p> 
 
<p>the news return obserable instance instead of <em>array of fetched news</em> which is desired</p>