CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Marco Santos
Marco Santos

Reputation: 1005

Calling service returning undefined

I am creating a service called ActiveUserProfileService, but when I call its function in a controller I get undefined as a result and I cannot figure out why. The strangest part is that, in the ActiveUserProfileService service, the information from the UserService is displayed through console.log, so I'm receiving the information, but after calling the ActiveUserProfileService in the controller, it gives me undifened. It seems like the data isn't passed around. Can someone help me ?

UserService.js:

(function () {
    'use strict';

    angular
        .module('myApp')
        .factory('UserService', UserService);

    UserService.$inject = ['$http'];

    /* @ngInject */
    function UserService($http) {
        var service = {
            getAuthenticatedUser:         getAuthenticatedUser,
            getUserInformation:           getUserInformation

        };
        return service;

        function getUserInformation(idUser) {
            return $http.post('api/user/details', {idUser: idUser});
        }
        function getAuthenticatedUser() {
            return $http.get('api/user');
        }

    }

})();

ActiveUserProfileService.js

(function () {
    'use strict';

    angular
        .module('myApp')
        .factory('ActiveUserProfileService', ActiveUserProfileService);

    ActiveUserProfileService.$inject = ['$http','UserService'];

    /* @ngInject */
    function ActiveUserProfileService($http, UserService) {


        var service = {
            isAccount:            isAccount
        };
        return service;

        ////////////////

        function isAccount(accountName) {
            UserService.getAuthenticatedUser()
                .then(function (response) {
                    var data = response.data;

                    UserService.getUserInformation(data.user.id)
                        .then(function (response) {
                            var userDetails = response.data;
                            console.log("It is");
                            console.log(accountName == userDetails.account_types[0].description_internal);

                            return  accountName == userDetails.account_types[0].description_internal;
                        });
                })
        }

    }

})();

My controller:

(function () {
    'use strict';

    angular
        .module('myApp')
        .controller('WizardController', WizardController);

    WizardController.$inject = [
        'UserService',

        'ActiveUserProfileService'

    ];

    /* @ngInject */
    function WizardController(UserService,ActiveUserProfileService) {

        var vm = this;


       console.log("ActiveUserProfileService");
    console.log(ActiveUserProfileService.isAccount("professional")); //is Returning me undefined



    }

})
();

Upvotes: 1

Views: 954

Answers (1)

Leonardo Lana
Leonardo Lana

Reputation: 610

The point is, you're trying to return a value for isAccount inside another function, a callback. When you do that, you're returning a value to this function, and not isAccount itself, so isAccount will not return anything, undefined, then. As you are calling an assynchronous method, then isAccount must be assynchronous as well,

Replace

 function isAccount(accountName) {
        UserService.getAuthenticatedUser()
            .then(function (response) {
                var data = response.data;

                UserService.getUserInformation(data.user.id)
                    .then(function (response) {
                        var userDetails = response.data;
                        console.log("It is");
                        console.log(accountName == userDetails.account_types[0].description_internal);

                        return  accountName == userDetails.account_types[0].description_internal;
                    });
            })
    }

with

 function isAccount(accountName) {
    var deferred = $q.defer();
        UserService.getAuthenticatedUser()
            .then(function (response) {
                var data = response.data;
                //when the user is loaded, then you resolve the promise you has already returned
                UserService.getUserInformation(data.user.id)
                    .then(function (response) {
                        var userDetails = response.data;
                        console.log("It is");
                        console.log(accountName == userDetails.account_types[0].description_internal);
                        deferred.resolve(accountName == userDetails.account_types[0].description_internal);
                        return; //here is not isAccount return, but anonymous inner function 'function (response)', you got it?
                    });
            });
    return deferred.promise; //return as soon as creates the promise
}

For sure you'd have to inject $q service as well

Upvotes: 3

Related Questions