javascript - Rxjs Forkjoin, how do I return single array for a particular property? - Stack Overflow

I have a fork join that grabs data from 10 http sources, and works well. The structure of each source is the same. However, the results i'm looking for are in the "data" property of the response. I need to get all the results into a single array of objects.

Response

{
 data:[stuff],
 included: [stuff],
 version: 1.0
}

Code

 forkJoin(requestArray).subscribe(results => {
   console.log(results);
 });

How can I return the result of this forkjoin, merging all of arrays from in the data property from every response into a single array?

Desired Output

[{all-Data-Objects-In-An-Array}, ...]

I have a fork join that grabs data from 10 http sources, and works well. The structure of each source is the same. However, the results i'm looking for are in the "data" property of the response. I need to get all the results into a single array of objects.

Response

{
 data:[stuff],
 included: [stuff],
 version: 1.0
}

Code

 forkJoin(requestArray).subscribe(results => {
   console.log(results);
 });

How can I return the result of this forkjoin, merging all of arrays from in the data property from every response into a single array?

Desired Output

[{all-Data-Objects-In-An-Array}, ...]

• javascript
• angular
• rxjs

Share Improve this question Follow edited May 22, 2020 at 16:24 Troyd asked May 22, 2020 at 16:11 TroydTroyd 43455 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

import { Component } from "@angular/core";
import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/timer";
import "rxjs/add/operator/do";
import "rxjs/add/operator/take";
import "rxjs/add/operator/share";
import "rxjs/add/operator/shareReplay";
import { forkJoin } from "rxjs/observable/forkJoin";
import { of } from "rxjs/observable/of";
import { tap, map } from "rxjs/operators";

@Component({
  selector: "my-app",
  templateUrl: "./app.ponent.html",
  styleUrls: ["./app.ponent.css"]
})
export class AppComponent {
  name = "Angular 5";
  data1 = {
    data: ["abc"],
    version: 1.0
  };
  data2 = {
    data: ["abc"],
    version: 1.0
  };
  private init$: Observable<any>;

  public ngOnInit() {
    forkJoin(of(this.data1), of(this.data2))
      .pipe(
        map(results => results.reduce((all, itm) => all.concat(itm.data), []))
      )
      .subscribe(results => {
        console.log(results);
      });
  }
}

just add a map operator and run a reduce inside it...

forkJoin(requestArray).pipe(
  map(results => results.reduce((all, itm) => all.concat(itm.data), []))
).subscribe(results => {
   console.log(results);
 });