La meilleure façon de “aplatir” un tableau à l'intérieur d'un RxJS Observables

Mon backend renvoie souvent données comme un tableau à l'intérieur d'un RxJS 5 Observables (je suis en utilisant Angulaire 2).

Je me retrouve souvent à vouloir processus de la matrice des éléments individuellement avec RxJS opérateurs et je le fais avec le code suivant (JSBin):

const dataFromBackend = Rx.Observable.of([
  { name: 'item1', active: true },
  { name: 'item2', active: false },
  { name: 'item3', active: true }
]);

dataFromBackend
  //At this point, the obs emits a SINGLE array of items
  .do(items => console.log(items))
  //I flatten the array so that the obs emits each item INDIVIDUALLY
  .mergeMap(val => val)
  //At this point, the obs emits each item individually
  .do(item => console.log(item))
  //I can keep transforming each item using RxJS operators.
  //Most likely, I will project the item into another obs with mergeMap()
  .map(item => item.name)
  //When I'm done transforming the items, I gather them in a single array again
  .toArray()
  .subscribe();

La mergeMap(val => val) ligne ne se sent pas très idiomatique.

Est-il un meilleur moyen pour appliquer des transformations aux membres d'un tableau qui est émis par une Observable?

NB. Je veux RxJS opérateurs (vs les méthodes de tableau) pour transformer mes articles car j'ai besoin de la capacité de projet de chaque élément dans un deuxième observables. Cas d'utilisation typique: "backend" les retours de la liste des identifiants et j'ai besoin de demander à l'ensemble de ces éléments depuis le backend.

InformationsquelleAutor AngularChef | 2017-02-27

23

Vous pouvez utiliser concatAll() ou mergeAll() sans aucun paramètre.
```
dataFromBackend.pipe(
  tap(items => console.log(items)),
  mergeAll(), //or concatAll()
)
```
(Y compris mergeMap) ne fonctionne que dans RxJS 5 parce qu'il traite les phénomènes Observables, tableaux, tableau comme des objets, des Promesses, etc. de la même manière.

Finalement, vous pourriez le faire aussi:
```
mergeMap(val => from(val).pipe(
  tap(item => console.log(item)),
  map(item => item.name),
)),
toArray(),
```
Jan 2019: mise à Jour pour RxJS 6
- Merci, Martin. Est-il exact que concatAll() permettrait de préserver l'ordre des éléments dans le tableau d'origine et mergeAll() ne serait pas?
- Puisque vous êtes le déballage d'un tableau, alors il n'est pas question que celle que vous utilisez et les deux produisent des articles commandés. Ce n'est pertinente que lorsqu'il est utilisé avec l'opération asynchrone qui n'est pas ce cas.
- Ce que vous avez besoin est juste map(vals => vals.map(item => item.name). Pas de supplément mergeMap, from, toArray et etc. Devriez-vous faire correspondre à chaque valeur de l'Observable, alors c'est une autre histoire: stackblitz.com/edit/rxjs-xzocbh?file=index.ts
InformationsquelleAutor martin
3

En fait, si vous en avez besoin à l'intérieur du flux d'utiliser seulement ceci:
```
.flatMap(items => of(...items))
```
- Il n'y a pas de véritable différence entre cela et juste items => items. Vous pourriez peut-être diront ce n'est plus "lisible" dans un sens, mais là encore, si vous ne savez pas ce flatMap() fait à l'époque n'aurait aucun sens. Ils produisent de la Observable<T> où T est quel que soit le type de pile est.
InformationsquelleAutor Nick Waits
2

Angulaire 6 note.

Si vous êtes en utilisant, comme un pipeable de l'opérateur, n'est connu que robinet!

https://www.learnrxjs.io/operators/utility/do.html
Ici est un exemple.
```
//RxJS 
import { tap, map, of, mergeMap} from 'rxjs/operators';

backendSource
  .pipe(
   tap(items => console.log(items)),
   mergeMap(item => item ),
   map(item => console.log(item.property))
  );
```
- un autre appuyez sur astuce: il y a deux paramètres supplémentaires pour l'erreur et complété - de sorte que vous pouvez vous connecter ceux qui sont trop
InformationsquelleAutor englishPete
1

Si c'est un fonctionnement synchrone, je suggère d'utiliser du javascript Array.map au lieu de cela, il devrait même vous faire économiser de performance:
```
const dataFromBackend = Rx.Observable.of([
  { name: 'item1', active: true },
  { name: 'item2', active: false },
  { name: 'item3', active: true }
]);

dataFromBackend
  .map(items => items.map(item => item.name))
  .subscribe();
```
- C'est la chose, le plus souvent je me retrouve à la projection de chaque élément dans un deuxième observables. Cas d'utilisation typique: "backend" les retours de la liste des identifiants et j'ai besoin de demander à l'ensemble de ces éléments de backend. Je devrais avoir compris que dans ma question.
- Cela ne faire une différence quant à la façon de construire votre flux, mais dans ce cas, vous êtes probablement mieux avec @martin réponse - si je dois le faire d'un personnel (légèrement indépendantes) commentaire ici: C'est généralement une mauvaise RESTE de l'architecture de la première demande, une liste d'id et de récupérer leurs coordonnées séparément dans le seul reste-appels - c'est de la torture pour n'importe quel serveur et prend généralement plus de temps que de simplement récupérer toutes les données dans un seul premier appel.
- Assurez-vous. Mais comme vous le savez nous sommes parfois la simple les consommateurs de l'API, pas son créateurs. Tout récemment, j'ai été confronté au cas d'utilisation je viens de décrire (le fait de devoir faire des appels distincts pour obtenir la liste des clés, puis pour les entités elles-mêmes) avec le compte Gmail de l'API JavaScript.
InformationsquelleAutor olsn

Vous devez vous connecter pour publier un commentaire.