AngularJS - Unable to get data from service

Question

In an attempt to resolve a problem synchronizing between controllers. I was trying to follow the solution provided here:

https://www.codementor.io/justinobney/keeping-angular-service-list-data-in-sync-with-controllers-a2hlwgwva

For some reason with my setup this doesn't seem to work for me. My controllers are returning either empty or its just simply not working. Would anyone know why this approach wouldn't work?

Main controller:

GDI_App.controller('Form_Controller', function ($scope, Service) {

    Service.get_data();

    //What I tried so far:
    $scope.Current.incidents = Service.Current.data; //returns nothing.
    $scope.Current.incidents = Service.current_data(); //returns [];

});

Service:

GDI_App.factory('Service', function($q) {

    var Current ={}
    Current.Data = [];

    return{

        get_data: function(){

            var Fake_Data = [
               { "Data1": "123123", "Data2": "15437"  },
               { "Data1": "432234", "Data2": "146"  },
               { "Data1": "45654", "Data2": "3534"  },
               { "Data1": "76587", "Data2": "78978"  },
               { "Data1": "2342", "Data2": "5345878"  },
               { "Data1": "178", "Data2": "34534"  },
               { "Data1": "173838", "Data2": "354534"  },
            ];

            return $q.when(Fake_Data)
            .then(function(data) {
                angular.copy(data, Current.Data);
            });

        }

        current_data: function(){
            return Current.Data;
        }

    }
});

Since you're wrapping the _copy_ operation in a `$q` promise, you probably need to wait for a digest cycle. See `$scope.$apply` — Phil, May 25 '18 at 02:43

score 0 · Answer 1 · answered May 25 '18 at 02:39

Why you need a copy? just return the data,

 get_data: function(){
            var Fake_Data = [
               { "Data1": "123123", "Data2": "15437"  },
               { "Data1": "432234", "Data2": "146"  },
               { "Data1": "45654", "Data2": "3534"  },
               { "Data1": "76587", "Data2": "78978"  },
               { "Data1": "2342", "Data2": "5345878"  },
               { "Data1": "178", "Data2": "34534"  },
               { "Data1": "173838", "Data2": "354534"  },
            ];
            return $q.when(Fake_Data)
            .then(function(data) {
                angular.copy(data, Current.Data);
                return data;
            });
}

and then,

$scope.Current.incidents = Service.get_data();

It dosent seem to work, I get a $$state in return and dosent actually populate data across my multiple controllers. Ami I missing something? — Daniel Ellison, May 25 '18 at 03:29

score 0 · Answer 2 · answered May 25 '18 at 04:09

I would suggest you to use custom promise. In the controller instead of returning the method directly to the property ,set the call back value to the property.

get_data: function(){
var deferred=$q.defer();
            var Fake_Data = [
               { "Data1": "123123", "Data2": "15437"  },
               { "Data1": "432234", "Data2": "146"  },
               { "Data1": "45654", "Data2": "3534"  },
               { "Data1": "76587", "Data2": "78978"  },
               { "Data1": "2342", "Data2": "5345878"  },
               { "Data1": "178", "Data2": "34534"  },
               { "Data1": "173838", "Data2": "354534"  },
            ];
            $q.when(Fake_Data)
            .then(function(data) {
               deferred.resolve(data)
            });
return deferred.promise;
}

GDI_App.controller('Form_Controller', function ($scope, Service) {

    Service.get_data().then(function(data){
$scope.Current.incidents=data;
     });

});

AngularJS - Unable to get data from service

2 Answers2