maskedjellybean
maskedjellybean

Reputation: 719

Angular nested promises 'Cannot read property 'then' of undefined'

I'm calling a service inside a factory from a controller. The service then calls another service that makes a $http request for some json. The first service then needs to modify the data from the json and return it to the controller. I can't figure out how to get the data back to the controller. I receive the error 'Cannot read property 'then' of undefined' about my use of then() inside the $scope.getModifiedData function inside my controller. The controller does know about the employeesFactory.modifyData() service, because if I remove the promise and then() functionality, it is successfully called.

I've been looking at this: https://docs.angularjs.org/api/ng/service/$q

Inside my controller:

$scope.getModifiedData = function() {
  var promise = employeesFactory.modifyData();
  promise.then(function(modifiedData) {
    console.log(modifiedData, 'modifiedData');
  });
};
$scope.getModifiedData();

Inside my factory:

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) {

      // Do stuff: Modify data from service.employeesRawData()
      // Eventually create object modifiedData
      modifiedData = {};

      if (modifiedData !== undefined) {
        deferred.resolve(modifiedData);
      } else {
        deferred.reject('Rejected');
      }

    return deferred.promise;
  });
};

Upvotes: 1

Views: 5359

Answers (1)

Igor Semin
Igor Semin

Reputation: 2496

Just replace it.

service.modifyData = function() {
  var deferred = $q.defer();

  service.employeesRawData()
    .then(function(employeesRaw) {

    ...

    return deferred.promise;
  });
};

on

service.modifyData = function() {
  var deferred = $q.defer();

  service.employeesRawData()
    .then(function(employeesRaw) {

      ...
  });

  return deferred.promise;
};

Upvotes: 1

Related Questions