Error with $http.get in angularJS -- Success not a Function

Question

Getting this error:

angular.min.js:122 TypeError: $http.get(...).success is not a function at getUserInfo (app.js:7) at new (app.js:12) at Object.invoke (angular.min.js:43) at Q.instance (angular.min.js:93) at p (angular.min.js:68) at g (angular.min.js:60) at g (angular.min.js:61) at g (angular.min.js:61) at angular.min.js:60 at angular.min.js:21

Here is my code:

var gitHub = angular.module('gitHub', []);

gitHub.controller('mainController', ['$scope', '$http', function($scope, $http) {

    var $scope.user = '';
    function getUserInfo($scope, $http){ 
        $http.get('https://api.github.com/users')
            .success(function (result) {
                $scope.user = result;
                console.log(result);
            });
    };
    getUserInfo($scope, $http);
}]);

and here is the html

<!DOCTYPE html>
<html ng-app="gitHub">
<head>
    <title>Github Users Directory</title>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div ng-controller="mainController">
        <div>
            <h1>GitHub Users</h1>
            Who do you want to search for?<input type="text" name="FindHim" ng-model="queryName" />
            <button ng-click="getUserInfo()">Search</button>
        </div>
        <div>
            {{ user }}
        </div>

    </div>
</body>
</html>

The `success` and `error` callbacks are deprecated since (I think) angular 1.5 — devqon, Dec 16 '16 at 12:03
The `.success` and `.error` methods are deprecated and have been [removed from AngularJS 1.6](https://docs.angularjs.org/guide/migration#migrate1.5to1.6-ng-services-$http). — georgeawg, Dec 16 '16 at 15:03

georgeawg · Accepted Answer · 2017-06-22T16:08:07.067

The .success and .error methods are deprecated and have been removed from AngularJS 1.6. Use the standard .then method instead.

$http.get('https://api.github.com/users')
  .then(function (response) {

    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;

    $scope.user = data;
    console.log(data);
});

Deprecation Notice

The $http legacy promise methods .success and .error have been deprecated and will be removed in v1.6.0. Use the standard .then method instead.

— AngularJS (v1.5) $http Service API Reference -- Deprecation Notice.

Also see SO: Why are angular $http success/error methods deprecated?.

devzero · Answer 2 · 2016-12-16T12:14:45.720

i think you need to use .then and not .success when using angular.

Example from the doc's

var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failed: ' + reason);
}, function(update) {
  alert('Got notification: ' + update);
});

Here is the example of how $Http uses it:

// 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.
  });

And finally your code could look like this

$scope.getUserInfo = function () {
    $http.get('https://api.github.com/users')
        .then(function (result) {
            $scope.user = result;
            console.log(result);
        }, function(result) {
            //some error
            console.log(result);
        });
};

They don't **need** to use `.then()` although they should as `.success()` is deprecated. You should probably give an example though that uses `$http` with `.then()` rather than a generic promise example. — Duncan, Dec 16 '16 at 12:12

score 4 · Answer 3 · edited Nov 10 '18 at 22:25

this works

https://docs.angularjs.org/api/ng/service/$http

// 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.
  });

score 2 · Answer 4 · answered Dec 16 '16 at 11:59

2

As per your current implementation, You are not passing arguments (i.e. $scope and $http) to getUserInfo from ng-click="getUserInfo()" thus you are getting the error.

You don't need to pass these as arguments as $scope and $http as its already injected in controller and define the function in $scope.

gitHub.controller('mainController', ['$scope', '$http', function($scope, $http) {

    $scope.user = '';
    //Redefined function, without arguments
    $scope.getUserInfo = function (){ 
        $http.get('https://api.github.com/users')
            .success(function (result) {
                $scope.user = result;
                console.log(result);
            });
    };
    $scope.getUserInfo();
}]);

answered Dec 16 '16 at 11:59

Satpal

132,252
13
159
168

Dont, same error, although I'm able to do it with using .then instead of .success method – Manzur Khan Dec 16 '16 at 12:13
Borrowed your code to give him an example using .then – devzero Dec 16 '16 at 12:18
@devzero, Never mind – Satpal Dec 16 '16 at 12:19
@ManzurKhanSarguroh, Which version of `angular` you are using? – Satpal Dec 16 '16 at 12:20
@Satpal version 1.6 – Manzur Khan Dec 16 '16 at 12:22

score 1 · Answer 5 · edited Nov 10 '18 at 22:23

1

You dont need to inject $scope, $http..

app.controller('MainController', function($scope, $http) { 
  $scope.fetchData = function(_city){
    $http.get("../api/AllPlaces?filter[where][placeCity]="+ _city)
    .then(function(response) {
      $scope.Data = response.data;
    });
  }
});

edited Nov 10 '18 at 22:23

georgeawg

48,608
13
72
95

answered Jul 20 '17 at 11:24

Sibghat Ullah

43
8

score 0 · Answer 6 · answered Dec 16 '16 at 12:11

No need to pass $http as a function parameter, since you have already injected $http as a dependency to your controller. I have made some modification to the code. Please check it will work fine for you.

var gitHub = angular.module('gitHub', []);

gitHub.controller('mainController', ['$scope', '$http', function ($scope, $http) {

    $scope.user = '';

    $scope.getUserInfo = function() {
        $http.get('https://api.github.com/users')
            .success(function (result) {
                $scope.user = result;
                console.log(result);
            });
    };
    $scope.getUserInfo();
}]);

score 0 · Answer 7 · edited Dec 01 '17 at 22:03

0

$http({
    method: 'GET',
    url: '....',
    headers: {
        'Authorization': 'Bearer ' + localStorage["token"]
    }
})
.then(function (data, status, headers, config) {
     alert(JSON.stringify(data) + "Status" + status);
})
.error(function (data, status, headers, config) {
     alert(JSON.stringify(data) + "Status" + status);
});

edited Dec 01 '17 at 22:03

PhatBuck

326
5
15

answered Jul 07 '17 at 11:21

Pawan Kumar

29
4

please format your code properly – gawi Jul 07 '17 at 11:45
The `.error` method is deprecated. Instead use `.catch`. – georgeawg Nov 10 '18 at 22:21

score 0 · Answer 8 · answered Nov 24 '17 at 07:04

According to Angular JS $http documentation, this system has been excludede from 1.4.3 + So, I have taken help from his post and you can try this way

app.controller('MainCtrl', function ($scope, $http){
   $http({
      method: 'GET',
      url: 'api/url-api'
   }).then(function (success){

   },function (error){

   });
}

OR

$http.get('api/url-api').then(successCallback, errorCallback);

function successCallback(response){
    //success code
}
function errorCallback(error){
    //error code
}

I prefer the second one which was more flexible for me.

score -1 · Answer 9 · edited Jul 31 '17 at 11:07

-1

function successCallback(response) {
return response
}
$http.get('url')
.then(successCallback)

edited Jul 31 '17 at 11:07

Vojtech Ruzicka

16,384
15
63
66

answered Jul 31 '17 at 10:50

Satzz

57
2
8

Thank you for this code snippet, which may provide some immediate help. A proper explanation [would greatly improve](//meta.stackexchange.com/q/114762) its educational value by showing *why* this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please [edit] your answer to add explanation, and give an indication of what limitations and assumptions apply. – Toby Speight Jul 31 '17 at 12:24

Error with $http.get in angularJS -- Success not a Function

9 Answers9

Deprecation Notice

Linked

Related