Service factory not working

Question

I inject this into my controller module:

var services = angular.module('services', []);

services.factory('jsonManager', ['$http', function($http) {

return{
  loadData: loadData
}

function loadData(){
   $http({
     method: 'GET',
     url: 'data/2015_data.json'
}).then(function successCallback(response) {
    return response.data;
  }, function errorCallback(response) {
    return response.err;
  });
}

}]);

... and it doesn't work! I'm using it on the controller like this, check it out:

var ctrls = angular.module('controllers', ['services']);

ctrls.controller('overviewController', ['jsonManager', '$scope', 

function(jsonManager, $scope){

$scope.load = function(){
  var datos = jsonManager.loadData();
  console.log(datos);
  $scope.gastos = datos.gastos.data;
  $scope.ganancias = datos.ganancias.data;


}

I omitted some code from my controller; the scope objects work properly. The problem is, that I get an error that tells me that "datos" is undefined at lines 55 and 56. Why does this happen?

You're trying to return from async call. Check this thread http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Viktor Bahtev, Mar 01 '16 at 12:56

ddepablo · Answer 1 · 2016-03-01T13:39:58.217

The $http service returns a promise, so you need to use then(successCallback, errorCallback) to resolve the promise.

service

var services = angular.module('services', []);
services.factory('jsonManager', ['$http', function($http) {
    var loadData = function(){
        $http({
            method: 'GET',
            url: 'data/2015_data.json'
        });
    return {
        loadData: loadData
    };
}]);

controller

var ctrls = angular.module('controllers', ['services']);
ctrls.controller('overviewController', ['jsonManager', '$scope', function(jsonManager, $scope){
    $scope.load = function(){
        var datos = jsonManager.loadData().then(function(res) {
            console.log(res.data);
            $scope.gastos = res.data.gastos.data;
            $scope.ganancias = res.data.ganancias.data;
        }, function(err) {
            console.log(err);
        });
    };
}]);

Jacob · Answer 2 · 2016-03-01T13:34:46.447

0

$http is asynchronous and

console.log(datos);
$scope.gastos = datos.gastos.data;

is run before jsonManager.loadData(); return it's value

Use callbacks or a promises

function loadData(callback){
   $http({
     method: 'GET',
     url: 'data/2015_data.json'
}).then(function successCallback(response) {
    callback(null, response.data);
  }, callback);
}

$scope.load = function(){
  var datos = jsonManager.loadData(function(err, datos){
    console.log(datos);
    $scope.gastos = datos.gastos.data;
    $scope.ganancias = datos.ganancias.data;
  });
}

edited Mar 01 '16 at 13:34

answered Mar 01 '16 at 12:58

Jacob

994
1
8
20

This is not working for me... keeps saying "datos is undefined" – Zerok Mar 01 '16 at 13:06
@Zerok was missing error from the callback function – Jacob Mar 01 '16 at 13:35

score -1 · Answer 3 · answered Mar 01 '16 at 13:21

It is asynchronous, so one way would be to force it to resolve in $scope.load like this:

$scope.load = function(){
  var datos = jsonManager.loadData().then(function(results){return results;});
  console.log(datos);
  $scope.gastos = datos.gastos.data;
  $scope.ganancias = datos.ganancias.data;

Service factory not working

3 Answers3