Serializing an object of type

Question

I wanted to implement AngularJS in MVC4. How will I return JSON in the format of angular in mvc4.

Here are my codes:

Controller:

        [HttpGet]
        public ActionResult sample1() 
        {

            return Json(db.Account_Info.ToList(), JsonRequestBehavior.AllowGet);
        }

Account.js

App.controller('Account', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout)
{
    $scope.bag = [];
    $scope.alldata = function ()
    {
        //
        $http.get('/Accounts/sample1').then(function ($response)
        {
            $scope.bag = $response;

        });


    }

    //execute on the page load
    $timeout(function ()
    {
        $scope.alldata();
    });
}]);

App.js

var App = angular.module('MyApp', []);

View:

<script src="~/Scripts/angular/angular.min.js"></script>
<script src="~/Scripts/angular/App.js"></script>
<script src="~/Scripts/angular/Account.js"></script>
<h2>sample</h2>
<div ng-app="MyApp" >
    <div ng-controller="Account">
        <div ng-repeat="acc in bag">
            <p>Username: {{acc.username}}</p>
        </div>
    </div>

</div>

Now, I've got this error:

A circular reference was detected while serializing an object of type 'System.Data.Entity.DynamicProxies.Account_Info_D9C702CA15FC076225862589F60CD5E8B8EA615EF98D78A1FEB764E267D88F97'.

Return data from the controller:

Need advice and help. Thanks in advance.

Your error dosen´t have nothing to do with angular. You have something and object/class that is in circular reference like A -> B, B -> C, C-> A. — Jose Rocha, Feb 05 '16 at 15:13
How will I solve this error? What should I do in my controller? — Jen143, Feb 05 '16 at 15:14
Did you try [**this**](http://stackoverflow.com/questions/26206288/entity-to-json-error-a-circular-reference-was-detected-while-serializing-an-ob)? Also what Json serializer are you using? if you don´t know read [**this**](http://stackoverflow.com/questions/16949520/circular-reference-detected-exception-while-serializing-object-to-json) In any case you should resolve the dependencies — Jose Rocha, Feb 05 '16 at 15:17
Yes, I've been trying all of those but still not displaying the data — Jen143, Feb 05 '16 at 15:21
Can you see what is comming in the response using browser network to see the response of the request `/Accounts/sample1`. if it is json or something else. — Jose Rocha, Feb 05 '16 at 15:23
can you go to you global.asax and add this 2 lines `var config = GlobalConfiguration.Configuration;` `config.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;` — Jose Rocha, Feb 05 '16 at 15:34
I guess, it is something to do with the controller because the return data from controller is an object not an array. — Jen143, Feb 05 '16 at 15:59
Still trying to corrupt your last comment, are you saying that the expected was an object and you get and list or the expected was an list and you get an object. In your controller you are returning a list and the data returned from the controller is a list too. — Jose Rocha, Feb 05 '16 at 16:09

score 0 · Answer 1 · answered Feb 05 '16 at 17:17

0

Use the .net javascript serializer like so:

return new JavaScriptSerializer().Deserialize<List<Account_Info>>(db.Account_Info.ToList());

Deserialize takes a generic. Check your model type. I assumed it was a list of Account_Info.

answered Feb 05 '16 at 17:17

Wilmer SH

1,417
12
20

trenthaynes · Answer 2 · 2016-02-05T18:44:18.370

You are dealing with 2 different issues.

Right now, your controller method is not working - therefore you Angular code will not work as expected.

On the server side, you are seeing an error when you try to serialize your object to JSON. It would help to add something like the Newtonsoft JSON serializer.

The controller method would then look something like this:

[HttpGet]
public ActionResult sample1() 
{
    var result = Newtonsoft.Json.JsonConvert.SerializeObject(db.Account_Info.ToList(), 
                    new Newtonsoft.Json.JsonSerializerSettings 
                    { 
                        ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Serialize 
                    });
    return Json(result, JsonRequestBehavior.AllowGet);
}

Once you are actually returning values from your controller then you will need to test your angular code to see if it is working.

Serializing an object of type

2 Answers2