I'm having trouble passing data back from a service to a controller in my AngularJS application. The service I am calling inside a factory makes an HTTP request for JSON data and then needs to modify it before returning it to the controller. However, I keep getting an error that says 'Cannot read property 'then' of undefined' when trying to use the then() method inside the $scope.getModifiedData function in my controller.
I have been reviewing the documentation on $q at https://docs.angularjs.org/api/ng/service/$q
Here is a snippet of my controller code:
$scope.getModifiedData = function() {
var promise = employeesFactory.modifyData();
promise.then(function(modifiedData) {
console.log(modifiedData, 'modifiedData');
});
};
$scope.getModifiedData();
And here is a snippet of my factory code:
var targetEmployeesAPI = 'http://sample.dev/api/employees.jsonp?callback=JSON_CALLBACK';
service.employeesRawData = function() {
var deferred = $q.defer();
$http({
method: 'JSONP',
url: targetEmployeesAPI
}).success(function(data) {
employeesRaw = data.employees;
deferred.resolve(employeesRaw);
}).error(function() {
deferred.reject();
});
return deferred.promise;
};
service.modifyData = function() {
var deferred = $q.defer();
service.employeesRawData()
.then(function(employeesRaw) {
// Modify data here
modifiedData = {};
if (modifiedData !== undefined) {
deferred.resolve(modifiedData);
} else {
deferred.reject('Rejected');
}
return deferred.promise;
});
};