How to merge Array Observavble of array in only one Observable of array with RXJS?

Question

I want execute x requests in paralel and merge array Observavble of array in only one Observable of array with RXJS?

public getMetrics(url: string): Observable<GenericMetric[]> {    
    const ox: Observable<GenericMetric[]>[] = [];
    res.forEach(elem => {
        ox.push(this.http.get<GenericMetric[]>(url));
    });

    return forkJoin(...ox);
}

I try:

return forkJoin(...ox); // return array of GenericMetric[] but I want all results in GenericMetric[]

I looking for how to merge my array of array result in olny one array

return forkJoin(ox).pipe(?????);

EDIT:

I try:

return forkJoin(...ox).pipe(tap(d => console.log(d) ));

and my result is:

[
  [{a:1}, {a:2}, {a:3}],
  [{a:4}, {a:5}]
]

but I want :

[{a:1}, {a:2}, {a:3}, {a:4}, {a:5}]

I have no idea what you want to do "return array of GenericMetric[] but I want all results in GenericMetric[]"... so it already does what you want? — martin
– martin, Commented Nov 5, 2019 at 10:26
GenericMetric [] is a array. array of GenericMetric [] is a array of array and not GenericMetric [] (simple array) — Stéphane GRILLON
– Stéphane GRILLON, Commented Nov 5, 2019 at 10:31
So you want to turn one emission of GenericMetric[][] into multiple emissions of GenericMetric[]? — martin
– martin, Commented Nov 5, 2019 at 11:31

wentjun · Accepted Answer · 2019-11-05 16:50:44Z

1

This is a demo on how you can achieve the desired results. You can use ES6's spread syntax to flatten to array of arrays.

const arr = [
  [{a:1}, {a:2}, {a:3}],
  [{a:4}, {a:5}]
];
const res = [];
arr.map(item => {
  res.push(...item)
})

console.log(res)

forkJoin(ox) will return you an observable of type Observable<GenericMetric[]>[], which means it is an array of GenericMetric[]. There is no way you can simplify that into an array of GenericMetric (GenericMetric[]).

However, you can still manipulate the result of forkJoin(ox) by making use of pipeable operators such as map,

forkJoin(ox)
  .pipe( 
    map(res => {
      const result = [];
      res.map(elem => {
        res.push(...elem)
      });
      return result;
    }),
  ).subscribe(res => {
    console.log(res);
    // do the rest
  })

edited Nov 5, 2019 at 16:50

answered Nov 5, 2019 at 10:57

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

wentjun Over a year ago

@sgrillon it is just a placeholder. I am implying that you can loop through the array of observables.

Stéphane GRILLON Over a year ago

I edit my question. I want [{a:1}, {a:2}, {a:3}, {a:4}, {a:5}]

wentjun Over a year ago

@sgrillon I have added the code sample on how you can achieve the above array

Stéphane GRILLON Over a year ago

Sorry but this is KO (compile KO), I try change arr.map by elem.map but KO again.

Stéphane GRILLON Over a year ago

I try other solution but KO. This sample is online: stackblitz.com/edit/angular-kvrhey?file=src/app/…

|

Stéphane GRILLON · Accepted Answer · 2019-11-05 16:42:32Z

My result is a unic element tab of tab, but if you have multiple tab of tab

[
  [
    [{a:1}, {a:2}, {a:3}],
    [{a:4}, {a:5}]
  ],
  [
    [{a:6}, {a:7}, {a:8}],
    [{a:9}, {a:10}]
  ]
]

, you can use switchMap.

public getMetrics(url: string): Observable<GenericMetric[]> {    
    const ox: Observable<GenericMetric[]>[] = [];
    res.forEach(elem => {
        ox.push(this.http.get<GenericMetric[]>(url));
    });

    return forkJoin(ox).pipe(switchMap(allGenericMetrics => {
                              let genericMetrics: GenericMetric[] = [];
                              allGenericMetrics.forEach(metrics => {
                                genericMetrics = genericMetrics.concat(metrics);
                              });
                              return of(genericMetrics);
                             })
                        );
}

Collectives™ on Stack Overflow

How to merge Array Observavble of array in only one Observable of array with RXJS?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related