service is returning undefined in the array in angularjs

Question

I am facing trouble with my angularjs script.

Background: I am trying to determine the location of the user, I have written my business logic in my service from where I am returning the location of the user.

Problem : The result I am getting in my console is as below :

[undefined] landingPage.js:11 undefined landingPage.js:11 undefined

var app = angular.module("PublicEvents", ["geolocation"]);

app.controller("iterator", ["$scope", "$http", "locationService1", function($scope, $http, locationService1){
    $scope.targetCity = [];
    $scope.targetCity.push(locationService1.location());

    console.log($scope.targetCity);
    $scope.$watch(function () { return locationService1.cityNameArray; },
            function (value) {
        $scope.targetCity = value;
        console.log($scope.targerCity);
    }
    );

}]);



app.service("locationService1",['$http','$window', function( $http, $window){
    var access = this;
    this.location = function(){
        $window.navigator.geolocation.getCurrentPosition(function(position) {
            access.lat = position.coords.latitude;
            access.long = position.coords.longitude;

            access.locationData = [];
            access.cityNameArray = [];

            /*var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=18.9750,72.8258&sensor=true";*/
            var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+access.lat+","+access.long+"&sensor=true";

            //AJAX CALL TO GET THE LOCATION
            $http.get(url).then(function(response) {
                access.locationData = response.data; 
                if(access.locationData.status == "OK" || access.locationData.status==200 ) {
                    angular.forEach(access.locationData.results, function(value, key){
                        var len = value.address_components.length;
                        for(var i = 0; i< len; i++){
                            if(value.address_components[i].types[0] =="locality" || value.address_components[i].types[0] =="sublocality_level_1"){
                                access.cityNameArray.push(value.address_components[i].long_name);
                            }
                        }
                    }); 
                };
            }); 
            return access.cityNameArray;
        });
    };
}]);

Answer 1

Seems like you need to return data from an async call and you are returning value from outside the function. I'd suggest you to use promise pattern in such situation.

this.location = function(){
    $window.navigator.geolocation.getCurrentPosition(function(position) {
        access.lat = position.coords.latitude;
        access.long = position.coords.longitude;

        access.locationData = [];
        access.cityNameArray = [];

        /*var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=18.9750,72.8258&sensor=true";*/
        var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+access.lat+","+access.long+"&sensor=true";

        //return promise from here..
        return $http.get(url).then(function(response) {
            access.locationData = response.data; 
            if(access.locationData.status == "OK" || access.locationData.status==200 ) {
                angular.forEach(access.locationData.results, function(value, key){
                    var len = value.address_components.length;
                    for(var i = 0; i< len; i++){
                        if(value.address_components[i].types[0] =="locality" || value.address_components[i].types[0] =="sublocality_level_1"){
                            access.cityNameArray.push(value.address_components[i].long_name);
                        }
                    }
                }); 
            };
            return access.cityNameArray; //returned from success callback
        }); 

    });
};

Inside controller you need to use .then function to get data from the service loacation function. You were doing console.log when you are doing async call which doesn't return anything.

locationService1.location().then(function(data){ //success callback.
   $scope.targetCity.push(data)
},function(error){ //error callback.
   console.log(error)
});