Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers

$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

share|improve this answer
 
it work partially it select data row now but i want access the each item in the data row in name value pair –  Rhushikesh Jan 14 at 7:51
add comment

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

$scope.Customer =customer.d;

share|improve this answer
 
NOT WORK SIR.... –  Rhushikesh Jan 11 at 13:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.