Menu
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.
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
870
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.
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
