I am currently working on extracting data from a database and displaying it in a view using AngularJS. I have created a WEM method for this purpose:
[WebMethod]
public static string fetchNames() {
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);
}
To call this method in AngularJS, I use the following code:
var App = angular.module('App', []);
App.factory('DataFactory', function ($http) {
return {
getNames: function () {
return $http.post('Home.aspx/fetchNames', { name: "" });
}
};
});
App.controller('DataController', function ($scope, DataFactory) {
DataFactory.getNames().then(function(data){
$scope.Names =$.parseJSON( data.d);
}, function(error){
// handle errors here
});
});
The binding in the view is done like this:
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="App">
<head runat="server">
<title></title>
</head>
<body data-ng-controller="DataController">
<form id="form1" runat="server">
<div>
Name<input type="text" data-ng-model="Name" />{{ Name }}
<ul>
<li data-ng-repeat="name in Names | filter:Name">{{ name }}</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>
However, the output I am currently getting is not as expected. I am struggling to extract only the name from the JSON object. Any suggestions on how to achieve this would be greatly appreciated.