Unable to bind JSon to list in Angular JS

Question

i am developing an application using angular js in which i have to populate the customer list using data in database for that i write a web method to get the data like

[WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static string  getname()
    {
        SqlHelper sql = new SqlHelper();

        DataTable dt = sql.ExecuteSelectCommand("select cust_F_name,cust_L_name from customer");

        Dictionary<string, object> dict = new Dictionary<string, object>();
        object[] arr = new object[dt.Rows.Count];
        List<CustName> custName = new List<CustName>();
        for (int i = 0; i <= dt.Rows.Count - 1; i++)
        {
            CustName c = new CustName();
            c.cust_F_name = dt.Rows[i]["cust_F_name"].ToString();            
            custName.Add(c);

        }
        dict.Add("JsonCustomer", custName);
        JavaScriptSerializer json = new JavaScriptSerializer();
        return json.Serialize(dict);
        //return "Rhsuhikesh";

    }

}
public class  CustName
 {
    public string cust_F_name { get; set; } 
}

catch that Json data as

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 = customer.data;
    }, function (error) {
        // error handling
    });
});

and view it as

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

and I am getting o/p as

outPut

but i want it as

Accepted output

data in json i have to access in name value pair but i am not understand how to do it please help me to out if it.

thanks in advance.

Looks to me your response is JSON-serialised twice.

Stewie
– Stewie

2014-01-14 12:48:08 +00:00
Commented Jan 14, 2014 at 12:48 — Stewie
– Stewie, Commented Jan 14, 2014 at 12:48

Alex Choroshin · Accepted Answer · 2014-01-14 12:57:35Z

0

Since you get your results as JSON string you need to convert it to JavaScript object using angular.fromJson

For example:

DemoApp.controller('SimpleController', function ($scope, SimpleFactory) {
SimpleFactory.getCustomer().then(function (customerData) {
    var customersRawObject = angular.fromJson(customerData);
}, function (error) {
    // error handling
});})

Then you can do somthing like this:

$scope.customerA=customersRawObject.JsonCustomer[0];

edited Jan 14, 2014 at 12:57

answered Jan 14, 2014 at 10:44

Alex Choroshin

6,1872 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to bind JSon to list in Angular JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related