Angular changes JSON string

Question

I'm trying to show some data on screen using AngularJS, ASP.NET and JSON.NET. When I'm calling $.getJSON it returns a normal JSONArray, but when I'm putting the data in a this.variablename inside my Angular controller, the data changes and Angular won't display it in my view.

Model

public class Directory
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Note> Notes { get; set; }
    public int ParentId { get; set; }
    public List<int> DirectoryIds { get; set; }

    public virtual Directory Parent { get; set; }
    public virtual ICollection<Directory> Directories { get; set; }
}

.NET controller action

public string GetDirectories()
{
    var directories = db.Directories.Where(d => d.ParentId.Equals(0)).ToList();

    return JsonConvert.SerializeObject(new { directorylist = directories }, Formatting.Indented,
                    new JsonSerializerSettings
                    {
                        ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                    });
}

Angular JS

(function () {
    var app = angular.module('notes', []);

    app.controller('DirectoryController', function () {
        this.directories = directories; //Check output 1
    });

    var directories = $.getJSON("/Directory/GetDirectories", function (data) {
        return data; //Check output 2
    });
})();

Output 1 (larger image http://i62.tinypic.com/2ppd0kg.png) The output that Angular makes of my JSON

Output 2

This is what I actually want to use but gets changed in output 1

you might consider switching to the angular resources or the angular $http.get() function instead of using a jquery function; aside from that, both frameworks implement the get function asynchronously, so you should set your data in the success function, instead of assigning it to the function itself. — Claies
– Claies, Commented Apr 15, 2015 at 11:37

Moduo · Accepted Answer · 2015-04-18 09:17:33Z

As Claies commented and Protector one answered, the getJSON call was asynchronous and this way I couldn't fill the var directories before my page loads.

The answer was to use $http.get from within the controller and use a variable to store the context of the controller, which I have done with var cont = this. Then I needed to initialize my directories variable with an empty array to avoid errors on page load.

Then later on I just assign data from within the success Promise to my directories variable.

(function () {
    var app = angular.module('notes', []);

    app.controller('DirectoryController', ['$http', function ($http) {
        var cont = this; //Save the context
        cont.directories = []; //Empty array to avoid errors on page load

        $http.get('/Directory/GetDirectories').
          success(function (data, status, headers, config) {
              //Save the async data to directories in the right context
              cont.directories = data;
          }).
          error(function (data, status, headers, config) {
          });
    }]);
})();

Thanks for the help. Both the comment from @Claies and the answer from @Protector one helped me to find a fit answer myself.

If anyone has a better answer, feel free to post it, so I can mark it as answer.

Protector one · Accepted Answer · 2015-04-15 11:34:56Z

1

getJSON asynchronously retrieves the data, and doesn't actually return it. You could try to set up your controller in the success parameter function:

var directories = $.getJSON("/Directory/GetDirectories", null, function (data) {
    app.controller('DirectoryController', function () {
        this.directories = data;
    });
});

Also note that the first parameter of getJSON is a data object that is sent to the server; in your example you provide it a javascript function.

edited Apr 15, 2015 at 11:34

answered Apr 15, 2015 at 11:28

Protector one

7,4185 gold badges69 silver badges89 bronze badges

Collectives™ on Stack Overflow

Angular changes JSON string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related