10

I am trying to use forkJoin to perform multiple http get requests and then combine all results into a simple Array using Angular 8.

The problem is that I end up with an Array of Arrays... instead of one Array of strings

My code below. All endpoints return a list of strings.

autoCompleteValues: any;

ngOnInit() {

    let res1 = this.dataMessageService.getFoo1();
    let res2 = this.dataMessageService.getFoo2();
    let res3 = this.dataMessageService.getFoo3();
    let res4 = this.dataMessageService.getFoo4();
    let res5 = this.dataMessageService.getFoo5();

    forkJoin([res1, res2, res3, res4, res5]).subscribe(data => {

      this.autoCompleteValues = data;
      console.log(this.autoCompleteValues);
    });
}

What am I doing wrong? How can I combine all the results into one large Array?

Improve this question

5 Answers 5

Reset to default
9

your code is correct since that is the expected behavior of forkjoin you just need to map it a little bit

forkJoin([res1, res2, res3, res4, res5])
.pipe(map(data => data.reduce((result,arr)=>[...result,...arr],[])))
.subscribe(data =>{

  this.autoCompleteValues = data;
  console.log(this.autoCompleteValues);
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

when I use .map() i get the erorr "Property 'map' does not exist on type 'Observable<[Object, Object, Object, Object, Object]>"
Working Demo of it : stackblitz.com/edit/…
this is indeed working! Would you edit your answer to include the stackblitz in your original answer please? So it could be easier for people to find in the future.
@khansen I didn't post any answer, just the stackbiltz link in the comment
9

Instead of this:

forkJoin([res1, res2]).subscribe((data) => {
    console.log(data)
});

Do this:

forkJoin([res1, res2]).subscribe(([data1, data2]) => {
    console.log(data1)
    console.log(data2)
});
Improve this answer

Comments

1

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs/observable/forkJoin';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  response = [];
  constructor(public http: HttpClient) {
    const request1 = this.http.get('https://restcountries.eu/rest/v1/name/india');
    const request2 = this.http.get('https://restcountries.eu/rest/v1/name/us');
    const request3 = this.http.get('https://restcountries.eu/rest/v1/name/ame');
    const request4 = this.http.get('https://restcountries.eu/rest/v1/name/ja');

    const requestArray = [];
    requestArray.push(request1);
    requestArray.push(request2);
    requestArray.push(request3);
    requestArray.push(request4);

    forkJoin(requestArray).subscribe(results => {
      console.log(results);
      this.response = results;
    });
  }
}
Improve this answer

1 Comment

Will that load the data before the view of the component? Sorta looks like it wouldn't.
0

You can do like this

 forkJoin([res1, res2, res3, res4, res5])
.pipe(map([res1, res2, res3, res4, res5]) 
    => [...res1, ...res2, ...res3, ...res4, ...res5])).subscribe(data => {
    this.autoCompleteValues = data;
    console.log(this.autoCompleteValues);
});

Make sure to import map operator too

import { map } from "rxjs/operators";
Improve this answer

1 Comment

I get an error Argument of type 'Observable<Object>[]' is not assignable to parameter of type '(value: [Object, Object, Object, Object, Object], index: number) => unknown'. Type 'Observable<Object>[]' provides no match for the signature '(value: [Object, Object, Object, Object, Object], index: number): unknown'
0

If any of the inner observables supplied to forkJoin error you will lose the value of any other observables that would or have already completed.

Please refer below link:- https://www.learnrxjs.io/operators/combination/forkjoin.html

Improve this answer

2 Comments

they all return results
After getting Result Loop for each Result return from different responses and push required unique the result into NEW Array.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.