Getting an 'undefined' error when working with my factory in my controller

Question

Hey guys I'm working on a new app, but I ran into a road block. My factory works fine within it self, but when I try to use it in my controller I get:

Error: getPlaces.getPlaces(...) is undefined

Here the code in my factory:

angular.module('Space')
.factory('getPlaces', ['$http', function($http) {
    var placesFactory = {};

    placesFactory.getPlaces = function() {


        if (navigator.geolocation) {
            var geoLoc = navigator.geolocation;
            return geoLoc.getCurrentPosition(function(position) {
                var lat = position.coords.latitude,
                    lng = position.coords.longitude;

            return getFSinfo(lat, lng);
        });

        } else {
            alert('Opps. Looks like you have your location turned off. Space uses your location to find places near you.');
        }


        function getFSinfo (lat, lng) {
            var clientID = 'J2HCJIGLTSFFJMKMLAEBT30QNLINBSDQBBDZNRRH1MUSDZ4V',
                clientSercet = 'RJBO0O01D2OSPR5R2KF4S214CFNXAOAD03DJM3L15ERLUCXF',
                coords = lat + ',' + lng,
                searchIds = '';

                var categoryIds = {
                    movie: '4bf58dd8d48988d17f941735',
                    museum: '4bf58dd8d48988d181941735',
                    stadium: '4bf58dd8d48988d184941735',
                    themePark: '4bf58dd8d48988d182941735',
                    waterPark: '4bf58dd8d48988d193941735',
                    eventVenue: '4d4b7105d754a06373d81259',
                    food: '4d4b7105d754a06374d81259',
                    mall: '4bf58dd8d48988d1fd941735',
                    musicStore: '4bf58dd8d48988d1fe941735',
                    foodDrink: '4bf58dd8d48988d1f9941735',
                    clothesStore: '4bf58dd8d48988d103951735'

                };


                for (var key in categoryIds) {
                    searchIds += categoryIds[key] + ',';
                }

                var FSUrl = 'https://api.foursquare.com/v2/venues/search?ll=' + coords + '&client_id=' + clientID + '&client_secret=' + 
                clientSercet +'&intent=browse&radius=20000' + '&categoryId=' + searchIds + '&v=20130815' + '&limit=50';


                return $http.get(FSUrl)
                    .then(function(response) {

                        var data = response.data.response;
                        console.log(data);
                        return data;

                    }, function(error) {
                        console.log(error);
                    }); 
        }



};



        return placesFactory;
}]);

Controller:

angular.module('Space')
.controller('MainCtrl', ['getPlaces', '$http', function(getPlaces, $http) {
    var vm = this;
    vm.message = 'Hello world!';

    getPlaces.getPlaces().then(function(data) {
        vm.place = data;
        console.log(vm.place);
    });

}]);

I don't understand why thought.

Any help would be great!

Please post your controller code. – Anid Monsur Sep 16 '15 at 01:13 — Anid Monsur, Sep 16 '15 at 01:13

score 2 · Accepted Answer · answered Sep 16 '15 at 01:24

2

Your controller is expecting getPlaces() to return a promise. getCurrentPosition() does not return anything. You can create your own promise though like this:

if (navigator.geolocation) {
    var geoLoc = navigator.geolocation;
    return $q(function(resolve) {
        geoLoc.getCurrentPosition(function(position) {
            var lat = position.coords.latitude,
                lng = position.coords.longitude;

            resolve(getFSinfo(lat, lng));
        });
    });
}

Be sure to inject $q into the factory. Lastly, to use $q as I have, you'll need Angular 1.3+. If you're using an earlier version, you can accomplish the same thing with deferreds.

answered Sep 16 '15 at 01:24

Anid Monsur

4,538
1
17
24

Thanks so much dude, it worked! I'm confused though, I thought when I returned the $http.get() request in my getFSinfo function that itself was returning a promise so I could chain then() methods on? Are there any resources I could use to help me understand this better? Thanks! – DevonAero Sep 16 '15 at 01:35
2

Yes, `getFSinfo` is indeed returning a promise. But in your original `getPlaces` code, you were returning the result of `geoLoc.getCurrentPosition()`, which is always undefined. Your indentation may obscure that fact. In the code I posted, you are, in essence, returning the promise from `getFSinfo`. – Anid Monsur Sep 16 '15 at 01:39
So in my original code `geoLoc.getCurrentPosition()` never actually returns getFSinfo? Also is there anything I read to help me understand it better? Sorry about all the questions haha – DevonAero Sep 16 '15 at 01:52
Thanks for link, but just so I understand better. `geoLoc.getCurrentPosition()` never returns getFSinfo()? – DevonAero Sep 16 '15 at 02:55
Correct. `geoLoc.getCurrentPosition()` returns nothing. Because the callback function you're passing is called asynchronously, whatever it returns does not actually end up in your code anywhere. – Anid Monsur Sep 16 '15 at 03:26

Getting an 'undefined' error when working with my factory in my controller

1 Answers1