0

I want to accomplish this task base when user click save button from UI component. The save method call the service to accomplished in the following order.

  1. Add additional information to data pass from UI. One of the information is get geolocation(lng+lat) information base on ui data. I'm using another service, which makes an HTTP call to Google maps API

    getLocation(address: string): Location {
    const urlPath = GoogleMapAPI.url + "json?address=" + encodeURIComponent(address) + "&key=" + GoogleMapAPI.key;
    let location: Location = null;

    //console.log(urlPath);
    const results = this.http
      .get(urlPath)
      .map(res => res.json());

    results.subscribe(result => {
      if (result.status !== "OK") { throw new Error("unable to geocode address"); }
      //let location = new Location();
      location = new Location();
      location.address = result.results[0].formatted_address;
      location.latitude = result.results[0].geometry.location.lat;
      location.longitude = result.results[0].geometry.location.lng;
      //console.log("GeocodingService:geocode", address, location);
    });
    return location;
}

  2. Save the data

    addRace(race: Race): firebase.Promise<any> {
    race.created_ts = race.updated_ts = moment().format();
    // additional information 
    this.setRaceInfo(race);
    // get geo location
    let location = this.geoService.getLocation(Race.formatFullAddress(race));
    if (location != null){
      race.latitude = location.latitude;
      race.longitude = location.longitude;
      race.address = location.address;
    }
    //save
    return this.racesList.push(race);
}

Console log output

save Object {name: "Test", date: "2014-11-07", city: "New York", country: "United States"…}
GeocodingService:geocode New York, New York, United States Location {address: "New York, NY, USA", latitude: 40.7127837, longitude: -74.0059413}

I'm able to save the data but I couldn't get the geolocation data before the save method is called. The geolocation value return after the save method is called. Am I missing something?

Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
thunder
  • 1
  • That is precisely what's supposed to happen, this is the whole point of asynchronous control flows like observables. If you want the value from the HTTP call, you need to subscribe to it *outside* the service. – jonrsharpe Mar 19 '17 at 00:50
  • Possible duplicate of [Angular 2 - Return data directly from an Observable](http://stackoverflow.com/questions/37867020/angular-2-return-data-directly-from-an-observable) – jonrsharpe Mar 19 '17 at 00:54
  • Are you using observables? Where does the Location object comes from? – Aravind Mar 19 '17 at 01:33
  • @jonrsharpe: Within geolocation funtion, which is part of http call, I do not want to return the observables of the result, and I want to return the value of the result, so I subscribed the http within the same function to get value. Is it wrong approached? – thunder Mar 19 '17 at 02:31
  • @Aravind. I'm not returning observables from http call. The location objects return from getLocation function, which return the location object base on address input string. – thunder Mar 19 '17 at 02:34
  • why are instantiating location object. – Aravind Mar 19 '17 at 02:45
  • Yes, that's wrong. You can't do that, *because it's asynchronous*. You have to return an observable or promise of the eventual value. – jonrsharpe Mar 19 '17 at 03:04
  • @jonrsharpe: I'll try to implement it the way you suggest it. I'll let you know how it goes. Thank you – thunder Mar 19 '17 at 04:23

0 Answers0