Angular 2 waiting for a function to return a value before starting another function

Question

I am pretty new to Angular 2.

I have 2 services, for this example lets say location and price. My first service calls for the users location and returns, the currency code and symbol, based on their IP address (not perfect but for this example it's fine) the following gets returned:-

{"code": "EUR","symbol": "€"}

When I attempt to inject a value from the into another service the service doesn't return any data

private Prices(){
  console.log(this.allPrices);
  return this.allPrices;
}

this.locationService.getLocation().subscribe(
  location => {this.currency = location},
    error => console.log("Error: ", error),
    () => {
        console.log(this.currency),
        this.priceApi.find({where: {currency: this.currency.code}}).map(this.Prices)
      }
)

Am I approaching this completely wrong?

Am help would be greatly appreciated, even if you point me in the correct direction so I am able to learn for myself.

If you require me to post any further code please let me know.

Thank you in advance!

@str thank you for your feedback

I have attempted what I have seen on Chaining Observables in RxJS But it just console.logs out:-

Observable {_isScalar: false, _subscribe: function}

Possible duplicate of [Chaining Observables in RxJS](https://stackoverflow.com/questions/37771855/chaining-observables-in-rxjs) — str, Jun 27 '17 at 11:03

score 1 · Accepted Answer · answered Jun 27 '17 at 11:44

1

I hope I got your question right. This is how I would approach it, by chaining the 2 calls:

this.locationService.getLocation()
  .flatMap(location => {
    this.currency = location;
    return this.priceApi.find({where: {currency: this.currency.code}})
  }).map(prices => ....)
  .subscribe(...)

answered Jun 27 '17 at 11:44

crash

4,152
6
33
54

When I implement your code I am unable to get any feedback, also when I attempt to console.log() out the this.currency after it has been set by this.currency = location; it doesn't return anything in the console. this.locationService.getLocation() .flatMap(location => { console.log('Starting'); this.currency = location; console.log(this.currency); this.allPrices = this.pricesApi.find({where: {currency: this.currency.code}}) console.log(this.allPrices); return this.allPrices }).map(this.Prices) – Tony Hensler Jun 27 '17 at 12:00
1

are you subscribing to it at the end? – crash Jun 27 '17 at 12:02
Ok after subscribing I get the following in the console when attempting to console.log(this.appPrices) - Observable {_isScalar: false, source: Observable, operator: MapOperator} – Tony Hensler Jun 27 '17 at 12:06
1

Well, you're getting that because your are doing the `console.log` of the Observable (`this.Prices`) and not its value. You'll have to subscribe to it to get the value. Also, why are you doing `this.allPrices = this.pricesApi.find....` and then mapping to `this.Prices` instead of simply doing as I wrote in the answer? – crash Jun 27 '17 at 12:09
Thank you, when trying to call the service from the component this.PriceService.getPrices().subscribe(prices => this.prices = prices) I am getting Property 'subscribe' does not exist on type 'void'. – Tony Hensler Jun 27 '17 at 12:56
I'm starting to be confused since you are not referencing other parts of code. What is `PriceService` and .`getPrices()`? Is the `getPrices()` method returning an Observable? It seems it's returning nothing – crash Jun 27 '17 at 12:59
In my service (PriceService) I have a function called getPrices which is where the code above sits inside that function. – Tony Hensler Jun 27 '17 at 13:19
1

Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/147728/discussion-between-crash-and-tony-hensler). – crash Jun 27 '17 at 13:23
It's fine now thank you I managed to resolve the rest of the issue. – Tony Hensler Jun 27 '17 at 14:07

Angular 2 waiting for a function to return a value before starting another function

1 Answers1