I am trying to submit a form data to an API endpoint which I created. I have tested it in PostMan and the API functions well and I can get the data in successfully. But while connecting that API endpoint to a function in angular js I get the following error.

Heres my code:

 $scope.saveSession = function() {

    $http.post("/session/survey", $scope.session).success(function(data, status) {
         $window.location.href = '/';

                console.log("Sucessfully getting data" + JSON.stringify(data));
    })
  }

Note:

$scope.session is an object that being populated by using the ng-model tag. For example:

<input type="text" ng-model="session.title">

Edit (Controller Code):

// This is our controller for the bio page
var session = angular.module('session', ['sessionService'])

session.controller('sessionCtrl', function($scope, $http, $window, sessionServices) {

$scope.session = {};

$scope.saveSession = function() {

    $scope.session.sessionNo = 1;
    $scope.session.coach = "mmmm";
    $scope.session.modules = "wokr place";

    //console.log(user);
    $http.post("/session/survey", $scope.session).success(function(data, status) {
         $window.location.href = '/';
                console.log("Sucessfully getting added bio" + JSON.stringify(data));
    })
    };

 });

I am trying to submit a form data to an API endpoint which I created. I have tested it in PostMan and the API functions well and I can get the data in successfully. But while connecting that API endpoint to a function in angular js I get the following error.

Heres my code:

 $scope.saveSession = function() {

    $http.post("/session/survey", $scope.session).success(function(data, status) {
         $window.location.href = '/';

                console.log("Sucessfully getting data" + JSON.stringify(data));
    })
  }

Note:

$scope.session is an object that being populated by using the ng-model tag. For example:

<input type="text" ng-model="session.title">

Edit (Controller Code):

// This is our controller for the bio page
var session = angular.module('session', ['sessionService'])

session.controller('sessionCtrl', function($scope, $http, $window, sessionServices) {

$scope.session = {};

$scope.saveSession = function() {

    $scope.session.sessionNo = 1;
    $scope.session.coach = "mmmm";
    $scope.session.modules = "wokr place";

    //console.log(user);
    $http.post("/session/survey", $scope.session).success(function(data, status) {
         $window.location.href = '/';
                console.log("Sucessfully getting added bio" + JSON.stringify(data));
    })
    };

 });

• javascript
• angularjs
• http

• @Sajeetharan see updated question. – Skywalker Commented Dec 10, 2016 at 13:02

4 Answers 4

That's because .success() really isn't a function. As the documentation explains, a promise is returned by $http.post() which you can chain with .then()

$http.post('/someUrl', data, config).then(successCallback, errorCallback);

Use promises, "success" function doesn't exists in $http object($http success and error methods are available only in older versions of Angular 1.x, but they've removed in Angular 1.6):

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

More in official documentation https://docs.angularjs.org/api/ng/service/$http

It's because you're using $http.post().success.

Try;

$scope.saveSession = function() {

$http.post("/session/survey", $scope.session).then(function(data, status) {
     $window.location.href = '/';

            console.log("Sucessfully getting data" + JSON.stringify(data));
})
}

We use .then to return a "promise" from the $http service.

Hope it helps!

I just dealt with a similar issue with versions 1.7.2 and 1.7.4. It's not exactly the same issue because I was never using .success but I'm posting here because this post comes up first when searching.

When using the shortcut version $http.post(/api/endpoint/', data) I would get:

"TypeError: $http.post is not a function"

And if I used it with the callbacks exactly as it appears in the documentation:

$http({method: 'POST', url: '/api/endpoint/', data: $scope.newObject}).then(function (response) {
    $scope.status = response.status;
    $scope.data = response.data;
}, function (response) {
    $scope.data = response.data || 'Request failed';
    $scope.status = response.status;
});

I was getting

"TypeError: $http(...).then is not a function"

In this case the problem was that I had both $resource and $http in the same controller. Not sure if this is the intended behavior but removing $resource suddenly made $http work again.

Hopefully this helps someone else