Login/Register
AngularJS : TypeError: $http(...).success is not a function on asp.net WebMethod
Asked Answered
Solved angularjshttpangularjs-1.6
A

3

5

I am new to AngularJs and using it in a web form

My Code is as below

var app = angular.module('demoApp', [])
app.controller('usrController', function ($scope, $http, $window) {
    $scope.userdata = {};
    var post = $http({
        method: "POST",
        url: "Index.aspx/GetData",
        dataType: 'json',
        data: {},
        headers: { "Content-Type": "application/json" }
    }).success(function (data, status) {
        console.log(data);
        $scope.userdata = data.d;
    }).error(function (data, status) {
        $window.alert(data.Message);
    });
});

My WebMethod code is as below

[WebMethod]
public static string GetData()
{
    DataTable dt = Helper.UserList("sp_GetSearchList");
    string JSONString = string.Empty;
    JSONString = JsonConvert.SerializeObject(dt).ToString();
    return JSONString;
}

My JSONString returns perfect json but I got error as

TypeError: $http(...).success is not a function

I have seen a lot of answers on Stack overflow but none of them actually solved this.

Extended Question

After using the following code it solved my question

var app = angular.module('demoApp', [])
app.controller('usrController', function ($scope, $http, $window) {
    $scope.userdata = {};
    $http.post("Index.aspx/GetData", {}).
    then(function (response) {
        console.log(JSON.parse(response.data.d));
        $scope.userdata = JSON.parse(response.data.d);
    });
}, 
function(error) {

});

My front end binding is this

<body data-ng-app="demoApp">
    <form id="form1" runat="server">
        <div data-ng-controller="usrController">
             <table>
                 <tr>
                     <th>Sl No</th>
                     <th>User ID</th>
                     <th>Employee ID</th>
                     <th>Employee Name</th>
                     <th>Birth Date</th>
                 </tr>
                 <tr data-ng-repeat="data in userdata">
                    <td>{{data.ID}}</td>
                    <td>{{data.UserID}}</td>
                    <td>{{data.EmployeeID}}</td>
                    <td>{{data.EmpName}}</td>
                    <td>{{data.BirthDate}}</td>
                 </tr>
             </table>
        </div>
    </form>
</body>

The data comes perfectly in console.log but its not binding in front end.

Help me where I am wrong.Thanks in advance

Allerie answered 21/6, 2017 at 7:9 Comment(4)
Try use then function instead of success function because it has expired. – Earing
Thanks now its coming in data.d but how to use the error – Allerie
show userdata object structure. – Earing
I returned a datatable and convert it to` json` so I have no user class. See the GetData() Method – Allerie
E
3

It should be like this 

 $http({
    method: "POST",
    url: "Index.aspx/GetData",
    dataType: 'json',
    data: {},
    headers: { "Content-Type": "application/json" }
}).then(function(result) {
  //Success
 }, function(error) {
 //Error
 });
Earing answered 21/6, 2017 at 7:18 Comment(3)
This works perfectly and returns data in console in json format console.log(JSON.parse(response.data.d)); $scope.userdata = JSON.parse(response.data.d); But I am not able to bind this in front end – Allerie
share what you tried to bind it or ask new question. – Earing
I changed my question please check – Allerie
L
5

In Angular 1.6, the $http service has changed: you can't use .success and .error anymore.

Instead, use .then. From $http docs:

$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.
  });
Lobbyism answered 21/6, 2017 at 7:16 Comment(0)
E
3

It should be like this 

 $http({
    method: "POST",
    url: "Index.aspx/GetData",
    dataType: 'json',
    data: {},
    headers: { "Content-Type": "application/json" }
}).then(function(result) {
  //Success
 }, function(error) {
 //Error
 });
Earing answered 21/6, 2017 at 7:18 Comment(3)
This works perfectly and returns data in console in json format console.log(JSON.parse(response.data.d)); $scope.userdata = JSON.parse(response.data.d); But I am not able to bind this in front end – Allerie
share what you tried to bind it or ask new question. – Earing
I changed my question please check – Allerie
B
2

Try below.

 $http.post( "Index.aspx/GetData", {} )
   .then(function(response) {
      $scope.userdata = response.data;
   });
Bolshevist answered 21/6, 2017 at 7:15 Comment(1)
More than two years later and your answer saved my bacon. Thank you, sir. – Eviaevict

© 2022 - 2024 — McMap. All rights reserved.