Getting JSON From .NET Webmethod, for use in ng-repeat

Question

Okay, so I've searched around far and wide and gotten some help. Not the least from this SO answer: https://stackoverflow.com/a/24657665/1223463

But here's where I stand:

I get the data back from the Webmethod, and am able to display it with a simple {{data}} on the page. However, nothing displays when I try to loop through the data (it consists of two JSON objects), and referencing their data keys.

Javascript:

angular.module("myApp", [])
            .controller("MyController", function ($scope, $http) {

                $scope.data = [];
                $scope.getData = function (item, event) {
                    $http.post('NGTest.aspx/GetGroups', { data: {} })
                        .success(function (data, status, headers, config) {
                            $scope.data = data.d;
                        });
                };

        }).config(function ($httpProvider) {

                $httpProvider.defaults.headers.post = {};

                $httpProvider.defaults.headers.post["Content-Type"] = "application/json; charset=utf-8";

            });

HTML:

<body ng-app="myApp">

    <div ng-controller="MyController" >
        <button ng-click="getData(item, $event)">Get data</button>
        <br/>

        {{data}}

        <div ng-repeat="d in data">
            {{d.ID}} a row
        </div>
    </div>
</body>

Code behind:

[WebMethod(EnableSession = true)]
    public static string GetGroups()
    {
        return @"[{
            'ID': 1568,
                'Orgno': '282-1'
        }, {
            'ID': 1569,
                'Orgno': '8925-2'
        }]";
    }

So, when I press the button, I get the data displayed as: [{ 'ID': 1568, 'Orgno': '282-1' }, { 'ID': 1569, 'Orgno': '8925-2' }] plain and simple. But the ng-repeat part yields no code.

Here's a fiddle with seemingly the same thing: http://jsfiddle.net/eurythmech/t9jzbm06/

The one thing I can see is different between them is that in the fiddle, the JSON data is supplied without quotes surrounding it.

Is this what I need to fix, somehow? If so, how?

Community · Accepted Answer · 2017-05-23 11:43:29Z

1

It seems that your data are returned as a string and not as an object. You can add an eval in your $http call :

$scope.getData = function (item, event) {
   $http.post('NGTest.aspx/GetGroups', { data: {} })
   .success(function (data, status, headers, config) {
       $scope.data = eval(data.d);
   });
};

A better way would be to return an Array of objects in your GetGroups method, so ASP.NET will serialize it for you. More infos right there WebMethod returning JSON but the response obj in my $.ajax() callback is only a string

One more thing, as you said, JSON must use double quotes for strings (check http://www.json.org/ )

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Feb 19, 2015 at 11:20

Paqman

4563 silver badges8 bronze badges

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

1 Comment

Christofer Ohlsson Over a year ago

Thank you! The eval() bit works brilliantly, but maybe I'll heed your suggestion and do it the better way in the end. (The actual code I intended to use .NET's JavaScriptSerializer, as I wasn't aware that I could pull it off without it :)

Collectives™ on Stack Overflow

Getting JSON From .NET Webmethod, for use in ng-repeat

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related