AngularJS: Load data json in controller from factory

Question

I can't load the data in controller, return undefined.

I have this factory service:

app.factory('factoryLlamada', function($http,$q) { return{
    cargar: function(archivo) {
        var deferred = $q.defer();
        $http.get(archivo).success(function(data) {
            deferred.resolve(data);
        })
        .error(function(error) {
            deferred.reject(error);
        });
        return deferred.promise;
    }
}});

And this controller:

app.controller('ctrlProducts', function(factoryLlamada) {
    this.saludo = 'Hola'; //this work's
    factoryLlamada.cargar('prueba.json').then(function(data) {
        this.datos = data;
        console.dir(data);  //return json object (ok)
        console.dir(datos); //return undefined
    })
    .catch(function(error) {
        console.log('Se ha producido un error: '+error);
    });
});

I don't know which is the problem...

Michel · Accepted Answer · 2016-03-21 10:49:54Z

3

The this inside the callback function does not refer to the controller.

Write instead:

app.controller('ctrlProducts', function(factoryLlamada) {
    var vm = this;
    vm.saludo = 'Hola'; //this work's

    factoryLlamada.cargar('prueba.json').then(function(data) {
        vm.datos = data;
        console.dir(data);  //return json object (ok)
        console.dir(vm.datos);
    })
    .catch(function(error) {
        console.log('Se ha producido un error: '+error);
    });
});

And by the way, in the factory you don't have to use $q promises. Just reuse the promise returned by $http.get and the code will be much concise:

app.factory('factoryLlamada', function($http) { return{
    cargar: function(archivo) {
        return $http.get(archivo);
    }
}});

And retrieve the data like this:

factoryLlamada.cargar('prueba.json').then(function(response) {
    // data is in response.data
});

edited Mar 21, 2016 at 10:49

answered Mar 21, 2016 at 10:45

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

amanuel2 Over a year ago

That wont work since he states in the comments already this.saludo="Hola" works

Michel Over a year ago

The this from this.saludo refers to the controller as it's outside of the callback. But that's not the case for this.datos.

jbrown Over a year ago

This answer is correct. You have to be careful using 'this' rather than $scope. In this case 'this' in the nested function is not the same as the 'this' in the controller.

Collectives™ on Stack Overflow

AngularJS: Load data json in controller from factory

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related