Menu
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?
699
There are multiple ways to handle multiple requests; they can be sequential or in parallel. In this post, we will cover both. Let's start with a simple HTTP request using the Angular Http service. In our app, we have just a single component that pulls in Angular's Http service via Dependency Injection.
The Angular HttpClient has features of testability features, typed request and response objects, request and response interception, Observable APIs, and streamlined error handling. This module already included when creating a new Angular app.
We will put all REST API or JSON requests in the Angular Service. To do that, generate an Angular Service using this Angular Schematic command. Open and edit `src/app/api.service.ts` then add this import of HttpClient that part of @angular/common/http. Inject that HttpClient module to the constructor of the Angular service.
RxJS can get confusing sometimes and it may not be obvious at first how to do certain things. One of these things may be how to do multiple HTTP requests the right way - but gladly it's not too complicated.
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);
});
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)
});
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;
});
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
