Unable to bind data get from database in view using angularJS
Question
I am trying to take data from a database and bind it in a view using AngularJS. For that I wrote a WEM method as follows:
[WebMethod]
public static string getname() {
SqlHelper sql = new SqlHelper();
DataTable dt = sql.ExecuteSelectCommand("select cust_F_name from customer");
Dictionary<string, object> dict = new Dictionary<string, object>();
object[] arr = new object[dt.Rows.Count];
for (int i = 0; i <= dt.Rows.Count - 1; i++) {
arr[i] = dt.Rows[i].ItemArray;
}
dict.Add(dt.TableName, arr);
JavaScriptSerializer json = new JavaScriptSerializer();
return json.Serialize(dict);
}
And I call it using AngularJS:
var DemoApp = angular.module('DemoApp', []);
DemoApp.factory('SimpleFactory', function ($http) {
return {
getCustomer: function () {
return $http.post('Home.aspx/getname', { name: "" });
}
};
});
DemoApp.controller('SimpleController', function ($scope, SimpleFactory) {
SimpleFactory.getCustomer().then(function(customer){
$scope.Customer =$.parseJSON( customer.d);
}, function(error){
// error handling
});
});
I bind it in view like this:
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="DemoApp">
<head runat="server">
<title></title>
</head>
<body data-ng-controller="SimpleController">
<form id="form1" runat="server">
<div>
Name<input type="text" data-ng-model="Name" />{{ Name }}
<ul>
<li data-ng-repeat="customerName in Customer | filter:Name">{{ customerName }}</li>
</ul>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="Script/Home.js" type="text/javascript"></script>
</body>
</html>
But it gives me this:
Please tell me how to get the only the name from a JSON object.
2 answers
solution1
1 2014-01-11 19:09:46
$http methods return a promise.
By design, promises invoke callbacks with only one argument .
so when using .then(function(customer) { , 'customer' will actually reference a promise object rather than the response body. A promise object has these properties:
- data – {string|Object} – The response body transformed with the transform functions.
- status – {number} – HTTP status code of the response.
- headers – {function([headerName])} – Header getter function.
- config – {Object} – The configuration object that was used to generate the request.
Solution:
DemoApp.controller('SimpleController', function ($scope, SimpleFactory) {
SimpleFactory.getCustomer().then(function(object){
$scope.Customer = object.data.d;
}, function(error){
// error handling
});
});
Also, You can use success and error , The arguments passed into these functions are destructured representation of the response object passed into the then method.
Read more: $http docs
solution2
0 2014-01-11 07:07:21
You do not need to do parseJSON if the server is returning a valid json. Just user the result
$scope.Customer =customer.d;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.