Pass data from a service to a controller AngularJS

Question

I have a service to get data from a url passed as a parameter. It works. But When I want to pass this data to a controller $scope, I do not get anything

var app= angular.module("ReciboApp",[]);
    // -------- SERVICIOS ------------------- 
    app.service("ABMService",function($http){
        this.obtenerDatos= function(url){
            $http.get(url)
                .success(function(data) {
                    datos = eval(data);
                    console.log(datos); //[Object, Object, Object, Object, Object]
                    return datos                                                    
                })
                .error(function(data) {
                    console.log('Error: ' + data);
                });
        }
    });
// -------- CONTROLADORES -------------------
// -- Empresas --
var empresasController= function($scope, ABMService){
    var url= "modelos/empresas_json.php"
    $scope.empresas= [];
    $scope.empresas = ABMService.obtenerDatos(url);
    console.log($scope.empresas); //undefined
}
app.controller("EmpresasCtrl", empresasController);

Take a look to my answer here : http://stackoverflow.com/a/35783394/3930193 — Steeve Pitis, Mar 03 '16 at 22:43
Thanks! I solved with a answer of Nicholas Graziano. http://stackoverflow.com/a/35783564/6015590 — Walter Lauxmann, Mar 04 '16 at 13:07

Nathan Friend · Answer 1 · 2016-03-03T22:51:15.487

Your obtenerDatos function doesn't return anything - it just makes an asynchronous call to $http. Try returning the result of the $http call (an angular promise) and then attach a .then handler to the returned promise in your controller:

var app= angular.module("ReciboApp",[]);
    // -------- SERVICIOS ------------------- 
    app.service("ABMService",function($http){
        this.obtenerDatos= function(url){

            // add a return statement here
            return $http.get(url)

                // change .success() to .then()
                .then(function(data) {
                    datos = eval(data);
                    console.log(datos); //[Object, Object, Object, Object, Object]
                    return datos;                                                    
                })

                // change .error() to .catch()
                .catch(function(data) {
                    console.log('Error: ' + data);
                });
        }
    });
// -------- CONTROLADORES -------------------
// -- Empresas --
var empresasController= function($scope, ABMService){
    var url= "modelos/empresas_json.php"
    $scope.empresas= [];

    // wait for the obtenerDatos() call to complete, and then
    // attach the returned data to the $scope
    ABMService.obtenerDatos(url).then(function(datos) {
        $scope.empresas = ABMService.obtenerDatos(url);
        console.log($scope.empresas); //undefined
    });
}
app.controller("EmpresasCtrl", empresasController);

Also note that I changed the .success() and .error() callbacks to .then() and .catch(), since the former have been deprecated.

Thanks for you answer, but don't show data in view (ng-repeat) — Walter Lauxmann, Mar 04 '16 at 12:36

score 0 · Answer 2 · edited May 23 '17 at 11:52

Thanks! I solved with a answer of Nicholas Graziano. https://stackoverflow.com/a/35783564/6015590

app.factory('MYAPI', function($http) {
    return {
        obtenerDatos: function(url) {
            return $http.get(url);
        }
    }
});
var empresasController= function($scope, MYAPI){
    var url= "modelos/empresas_json.php";
    MYAPI.obtenerDatos(url).then(function(response) {
        $scope.empresas = eval(response.data);
    }, function(error) {
        console.error(error);
});
app.controller("EmpresasCtrl", empresasController);

Pass data from a service to a controller AngularJS

2 Answers2