0

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:

enter image description here

Please tell me how to get the only the name from a JSON object.

2 Answers 2

1

$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:

  1. data – {string|Object} – The response body transformed with the transform functions.
  2. status – {number} – HTTP status code of the response.
  3. headers – {function([headerName])} – Header getter function.
  4. 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

1
  • it work partially it select data row now but i want access the each item in the data row in name value pair Commented Jan 14, 2014 at 7:51
0

You do not need to do parseJSON if the server is returning a valid json. Just user the result

$scope.Customer =customer.d;

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.