Angular service return undefined

Question

I have a problem with my service in angular.

My service has the next code:

app.service("Utilidades", ['$http', '$window', function ($http, $window) {
return {
    Get: function (urlAbsoluta, parametros, callback) {
        var Utilidades = this;

        $http
            .get(app.UrlBase + urlAbsoluta, parametros)
            .then(function (data) {
                var Datos = angular.fromJson(data);

                Utilidades.GuardarToken(Datos.Token);

                callback(Datos);
            });
    },


    ObtenerMenu: function () {
        var Utilidades = this;

        Utilidades.Get("Administracion/Api/Usuarios/Menu", {}, function (Datos) {
            Datos = angular.fromJson(Datos.data);

            if (Datos.Error == "") {
                return Datos.Resultado;
            } else {
                return "";
            }
        });
    }
}
}]);

Then, in my controller i have the next code:

app.controller('LoginCtrl', ['$scope', '$http', '$location', 'Utilidades',
function Iniciador($scope, $http, $location, Utilidades) {
        var Li = this;

        Li.Usuario = "";
        Li.Contrasena = "";
        Li.Error = "";
        Li.MenuItems = [];

        Li.Menu = function () {
            Li. MenuItems = Utilidades.ObtenerMenu();
        }
    }]
);

When i run this, Li.MenuItems have undefined value and i don't know why.

Answer 1

Your return statements are in a function inside your ObtenerMenu method so the ObtenerMenu method is not actually returning anything. You need to provide a way to access the resulting value:

Service

app.service("Utilidades", ['$http', '$window', function ($http, $window) {
    return {
        Get: function (urlAbsoluta, parametros) {
            var Utilidades = this;

            // v------------  return statement here
            return $http
                .get(app.UrlBase + urlAbsoluta, parametros)
                .then(function (data) {
                    var Datos = angular.fromJson(data);

                    Utilidades.GuardarToken(Datos.Token);

                    // v------------  return statement here
                    return Datos;
                });
        },


        ObtenerMenu: function () {
            var Utilidades = this;

            // v------------  return statement here
            return Utilidades.Get("Administracion/Api/Usuarios/Menu", {})
                .then(function (Datos) {
                    if (Datos.Error == "") {
                        return Datos.Resultado;
                    } else {
                        return "";
                    }
                });
        }
    };
}]);

In Controller

Li.Menu = function () {
    Utilidades.ObtenerMenu()
        .then(function (resultado) {
             Li. MenuItems = resultado;
        });
}

Answer 2

It's because ObtenerMenu function is asynchronous function. This function doesn't return anything initially (so undefined) and later, after some time when ajax request finishes, this function is already finished its execution stack