Parallel HTTP requests in Angular 4

Question

I am building a simple weather app that uses a REST service to display current weather data in any city entered by the user.

The dashboard page should display the current weather in ~5 cities specified by the user.

So my question is - given an array of 5 cities, what is the best way to issue a call to the REST service (via Angular service) for each element in that array.

Here's a code excerpt from my initial attempt:

locations: string[] = ["Seattle", "Woodinville", "Krasnoyarsk", "Stockholm", "Beijing"];

...

ngOnInit() {

    this.locations.forEach(function(element) {
      this.weatherService.getWeather(element).subscribe((data) => {
        console.log(data);
      });
    });

  }

But this yields an error: Failed to compile.

c:/Projects/weather-app/src/app/components/dashboard/dashboard.component.ts (19,12): Property 'weatherService' does not exist on type 'void'.

I realize the 'forEach' is not going to work here - but what's the best practice for doing this in ng 4?

Thanks.

valorkin · Accepted Answer · 2017-09-15 21:47:39Z

15

This will map locations array in array of Observables, forkJoin will emit value, when all responses are in place

Observable
.forkJoin(this.locations
  .map((element) => this.weatherService.getWeather(element))
.subscribe((data) => console.log(data));

answered Sep 15, 2017 at 21:47

valorkin

1,3399 silver badges20 bronze badges

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

2 Comments

jspru Over a year ago

This is exactly what I was looking for and answers my question - thanks

Pardeep Jain Over a year ago

Is there any difference If I use forkJoin or simply call the same function in loop iteration?

DeborahK · Accepted Answer · 2019-12-09 18:10:48Z

4

The issue is that using the function keyword instead of an arrow function, you are losing what this means. Inside a function using the function keyword, this refers to the function and not to your component class.

Modify to something like this:

this.locations.forEach(element => {
  this.weatherService.getWeather(element).subscribe((data) => {
    console.log(data);
  });
});

Note: You could also consider using forkJoin to wrap multiple observables.

You can find docs on it here: https://www.learnrxjs.io/operators/combination/forkjoin.html

But the example here may be more helpful: rxjs with multiple forkjoin when doing http requests

UPDATE: See improved docs here:

https://rxjs.dev/api/index/function/forkJoin

edited Dec 9, 2019 at 18:10

answered Sep 15, 2017 at 21:13

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

3 Comments

jspru Over a year ago

Thanks for your answer - yes 'this' was the problem. Will look into using 'forkJoin' as well.

Pardeep Jain Over a year ago

can you point out the benifits of forkJoin or simply calling method in forEach?

DeborahK Over a year ago

With forEach your code needs to subscribe to each Observable. That means you should also unsubscribe from each observable (which is not possible with the code as shown above.) With the forkJoin, you don't have to subscribe to any of the "inner" observables ... only to the "outer" forkJoin.

Collectives™ on Stack Overflow

Parallel HTTP requests in Angular 4

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related