コレクションを非同期で設定するにはどうすればよいですか？

Question

私はスーパーマーケットのコレクションに、スーパーマーケットごとに非同期的に商品を追加しています。もっとこのような何かに

[{ 
    name: 'supermarket x', 
    products: [1, 2] 
}] 

：

目的は、このような何かを持っていることから渡すことです

[{ 
    name: 'supermarket x', 
    products: [{ 
     id: 1, 
     name: 'cacao' 
    }, { 
     id: 2, 
     name: 'milk' 
    }] 
}] 

私は、このための基本コードを作るようになったが、私は移入する達成することはできません一度それが完了した後の最初のストリーム。

アイデア？

私はあなたのおかげで

https://jsbin.com/nucutox/1/edit?js,console

のためのより速くそれを作るための構造とここJSBinを残します！

Answer 1

したがって、複数のスーパーマーケットオブジェクトを発行するストリームを返すgetSupermarkets()関数と、指定されたIDを持つ単一の製品を発行して完了するストリームを返すgetProduct(id)関数があります。また、製品IDを含むスーパーマーケットのストリームを、「解決済み」製品オブジェクトを含むスーパーマーケットのストリームにマッピングしたいとします。私はこの権利を得ましたか？新しいスーパーマーケットオブジェクトが到着すると

const supermarkets$ = getSupermarkets() 
    .concatMap(supermarket => { 
     const productStreams = supermarket.products 
      .map(productId => getProduct(productId)); 

     return Rx.Observable.combineLatest(productStreams) 
      .map(products => Object.assign({}, supermarket, { products })); 
    }); 

supermarkets$.subscribe(x => console.log(x)); 

は、我々は最初の製品観測の配列に製品IDのその配列をマッピングする、すなわちArray<Id> => Array<Observable<Product>>：

は、ここに私のソリューションです。次に、その配列をcombineLatest演算子に渡します。演算子は、各オブザーバブルが値を生成し、それらの値の配列、つまり製品オブジェクトの配列を出力するまで待機します。次に、配列にproductsを設定した新しいスーパーマーケットオブジェクトを生成します。元のsupermarketオブジェクトを変更しないでください。その理由はです。

それは私が少しgetProduct()の実装を更新しなければならなかった動作させるには：.of(product)演算子の代わりに、productとして.from(product)を使用することは、我々が発光するようにしたいプレーンオブジェクトです。