Angular $http called from service, 'then' is undefined

Question

I have seen this question many times but I can't figure out why one of my controller functions (controller 1) works fine and one (controller 2) doesn't.

Controller 1:

angular.module('app').controller('MyCtrl1',function($scope,MyFactory)) {

  //This function works great
  MyFactory.deleteItem(item.id).then(function(response) {
    //woot woot I am here and I am fine
  });
}); //end controller 1

Controller 2:

angular.module('app').controller('MyCtrl2',function($scope,MyFactory)) {

 //Function #2 that doesn't work ... 'then' is undefined
  MyFactory.createItem(item).then(function(response) {
    //booo hooo I never get here and I am definitely not fine
  });
}); //end controller 2

The factory:

.factory("MyFactory", function($http) {

var service = [];

service.deleteItem = function(itemId) {
  return $http({
    method: "delete",
    url: "http://www.example.com",
    params: //valid params go here
  }).then(function(response) {
    console.log("DELETING!!!!");
    return response.data;
  });
}

service.createItem = function(post) {
  return $http({
      url: '?create',
      method: 'post',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      data: payload //an object
    }).then(function(response){      
      console.log(response.data); //we are fine here. there is a valid response 
      return response.data; 
   });
}
return service;
}); //end factory

The error thrown when executing 'createItem' is 'Cannot read property 'then' of undefined' What am I missing ?

use $promise.then(function() { ... it will definately work — ojus kulkarni
– ojus kulkarni, Commented Feb 28, 2016 at 18:58
This also did not work: var promise = MyFactory.createItem(item); promise.then(function(response) { //booo this didnt work either }); — lilbiscuit
– lilbiscuit, Commented Feb 28, 2016 at 19:03

Omri Aharon · Accepted Answer · 2016-02-28 19:02:45Z

3

You are missing the return in the createItem statement:

service.createItem = function(post) {
   return $http({
      url: '?create',
      method: 'post',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      data: payload //an object
    }).then(function(response){      
      console.log(response.data); //we are fine here. there is a valid response 
      return response.data; 
   });
}

Without it, there is no return value (which is undefined) on which you can't chain the .then.

answered Feb 28, 2016 at 19:02

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

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

4 Comments

lilbiscuit Over a year ago

Thank you...that was true. But still getting undefined ??

Omri Aharon Over a year ago

@lilbiscuit Hehe.. happens to all.

lilbiscuit Over a year ago

OK I removed the console.log and the function appears to work. But why ?

Omri Aharon Over a year ago

The console.log has nothing to do with it. You needed a return of the $http, that's what was missing. all console.log does it print to your dev console.

ojus kulkarni · Accepted Answer · 2016-02-28 19:08:27Z

-2

If you are not returning $http the use like this :

$http({
  url: '?create',
  method: 'post',
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  data: payload //an object
}).$promise.then(function(response){      
  console.log(response.data); 
  return response.data; 
});

answered Feb 28, 2016 at 19:08

ojus kulkarni

1,9073 gold badges27 silver badges42 bronze badges

2 Comments

ojus kulkarni Over a year ago

This is not a negative part of answer , it will also work

georgeawg Over a year ago

$promise is not a property returned by the $http service. You are confusing $resource objects with $http promises.

Collectives™ on Stack Overflow

Angular $http called from service, 'then' is undefined

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related