Accessing data from Angular service with a method

Question

I am trying to access data from a method within a service which returns coordinates which I use to make an HTTP requests. I added my Leaflet code inside of my controller so I can access that lat,lng coordinates to make an API request to another API. Everything is working. The problem is when I try to pass this data to the controller it does not read the property "L.Control.Search". I also attempted to write an array and access it within the controller and it returned undefined.

   app.service('mapService', (function($http,$q) {
    //Coordinates
    var fmCoordinates = {};
    //Function to Request markets
    var requestMarkets = function(lat,lng){
        var defer = $q.defer();
        var dataFromHttp = {};
        var options = {
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: "http://someurl?lat=" + lat + "&lng=" + lng
        };
        $http(options).then(function(result) {
        dataFromHttp = result.data;
        defer.resolve(dataFromHttp);
    }, function(error){
        defer.reject(error);
    });
    return defer.promise;
    };


L.Control.Search = L.Control.extend({

_getLocation: function(key) {   //extract latlng from _recordsCache

        var latLong = this._recordsCache[key];
        console.log("This is latlong:\n"+Object.keys(latLong));
        fmCoordinates.lat = latLong.lat;
        fmCoordinates.lng = latLong.lng;
        console.log(fmCoordinates.lat,fmCoordinates.lng || "Nothing yet!");
        var promise = requestMarkets(fmCoordinates.lat,fmCoordinates.lng);
        promise.then(function(greeting) {
            for(var property in greeting.results) {
                console.log(property + "=" + greeting.results[property]);
                };
            console.log('Success: ' + greeting.results);
            }, function(reason) {
            console.log('Failed: ' + reason);
            });
        if( this._recordsCache.hasOwnProperty(key) )
            return latLong;//then after use .loc attribute
        else
            return false;
    },

L.Map.addInitHook(function () {
    if (this.options.searchControl) {
        this.searchControl = L.control.search(this.options.searchControl);
        this.addControl(this.searchControl);
    }
});

L.control.search = function (options) {
    return new L.Control.Search(options);
};

}));

Where do you return something? You can only access data which you return in service. — Simon Schüpbach, May 25 '16 at 20:00
OK, I understand that. Now in my controller I want to call mapService.requestMarkets but requestMarkets is called inside _getLocation(). I am still unable to access the function because it is inside of L.Control.Search which my controller does not recognize — Roscoe, May 25 '16 at 22:36
You can return L.Control.Search for example. `return { search: L.Control.Search, requestMarkets: requestMarkets}` and then in your controller just `mapService.search()` — Simon Schüpbach, May 25 '16 at 22:41

Mike Feltman · Accepted Answer · 2016-05-25T20:30:33.573

1

I think your promise code is off slightly. Try changing it to the following. Right now you're returning before the promise has been resolved.

var requestMarkets = function(lat,lng){
    var defer = $q.defer();
    var dataFromHttp = {};
    var options = {
        type: "GET",
        contentType: "application/json; charset=utf-8",
        url: "http://someurl?lat=" + lat + "&lng=" + lng
    };
    return $http(options).then(function(result) {
        dataFromHttp = result.data;
        defer.resolve(dataFromHttp);
        return defer.promise;
    }, function(error){
        defer.reject(error);
        return defer.promise;
   });

};

Also in one place you have l.Control.Search and L.control.search in another.

edited May 25 '16 at 20:30

answered May 25 '16 at 20:01

Mike Feltman

5,160
1
17
38

The promise you're using in _getLocation has similar issues. Any code you place after the then() function will run immediately, not after the then function completes. (This is the one that's actually the cause of your problem, but I think you get the idea.) – Mike Feltman May 25 '16 at 20:04
Why `return defer.promise`? For me it does not make sense to return some value at the end of success or error callback function. – Simon Schüpbach May 25 '16 at 20:07
Um, you have return defer.promise in your original code. I just moved it to the proper place. At any rate, you are making calls via promises in your functions and returning values from the functions with the expectation that the promises have completed, which you can't do. Also, I updated the answer to reflect some case issues. – Mike Feltman May 25 '16 at 20:30

Accessing data from Angular service with a method

1 Answers1