Dealing with Observables in Angular Application

Question

I have an Angular application in which I'm using the RxJs library to fetch data from a backend API server. The call looks like this:

allPowerPlants(onlyActive: boolean = false, page: number = 1): PowerPlant[] {
    const self = this;
    const path = `/powerPlants?onlyActive=${onlyActive}&page=${page}`;
    this.apiService.get(path).subscribe(
      powerplants => {
      powerplants.map(item => {
        if (this.isPowerPlant(item)) {
          // make the item an instance of PowerPlant
          self.powerPlants.push(item as PowerPlant);
        }
      });
    },
    err => {
        console.log('oops **** some error happened');
      // handle error
    });
    return this.powerPlants;
  }

I now have the following questions:

Is the way I return the array ideal? In the line where I do:

return this.powerPlants

the powerPlants is an array in the class that is enclosing this method!

What I did was that I just started my Angular app, but the backend API server was not running locally on my machine. When I accessed my app on the browser, I noticed that my app is constantly making calls to the backend API server. How do I avoid this? Why is the app making that many calls where every call was returning a 404! After some time, I could see in my browser console that it had made more than 10000 HTTP calls to the backend API server with each call having returned a 404!
The HTTP method OPTIONS is getting executed instead of a GET! Why is this? I understand that this has got to do something with the CORS filter, which I have already enabled on my backend API server!

Regarding 3, check out https://stackoverflow.com/questions/15381105/cors-what-is-the-motivation-behind-introducing-preflight-requests — Catalyst, Aug 29 '17 at 15:32

score 0 · Accepted Answer · answered Aug 29 '17 at 15:38

0

below is the answer to your question.

Is the way I return the array ideal? In the line where I do: No

return this.powerPlants returning to who? this is not a called function or something. you are subscribing to the observable to get data from it and now you need to use in your application

You can use Observable.map in case you want to send data someone else who can subscribe it,

allPowerPlants(onlyActive: boolean = false, page: number = 1): PowerPlant[] {
    const self = this;
    const path = `/powerPlants?onlyActive=${onlyActive}&page=${page}`;
    this.apiService.get(path).map(
      powerplants => {
      powerplants.map(item => {
        if (this.isPowerPlant(item)) {
          // make the item an instance of PowerPlant
          self.powerPlants.push(item as PowerPlant);
        }
      });
    },
    err => {
        console.log('oops **** some error happened');
      // handle error
    });
    return this.powerPlants;
  }

for your question 2, you can put some kind of check if the array is not empty or data is available, not to make a call to server.
The HTTP method OPTIONS is getting executed instead of a GET! Why is this? I think it always make a call to check header might be. not sure about it.

answered Aug 29 '17 at 15:38

Aniruddha Das

14,517
13
83
111

What is the difference in what you posted to what I originally posted for my first question? Don't I need a subscriber at all to get data from an Observable? – joesan Aug 29 '17 at 18:28
so the map is a intermediate method which returns observable but subscribe does not return an observable. that is the difference. incase you want to process some data and send observable, then map will do it, but if you want to end the observable chain subscribe is good. you can go in detail in rxjs method list – Aniruddha Das Aug 29 '17 at 18:44
Yes, I'm familiar with Observables from the Rx specification as I use Monix for my Scala backend where I can map with Observables, but if I want to read a data out, I need a Subscriber with an onNext method on it! – joesan Aug 29 '17 at 18:46
you are right, you can do that with subscription or map. in case of map you can modify the response send it back to the subscription chain – Aniruddha Das Aug 29 '17 at 18:50
Strange! My code does not work anymore! If I use the map function instead of Subscribe, I'm seeing that my HTTP api is not getting called at all! – joesan Aug 29 '17 at 19:02

Dealing with Observables in Angular Application

1 Answers1