Currently, I am attempting to display data on my screen utilizing AngularJS, ASP.NET, and JSON.NET. I have noticed that when I make a call to $.getJSON, it returns a standard JSONArray. However, when I assign this data to a variable inside my Angular controller, the data undergoes some changes and Angular fails to display it properly on my view.
Data 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; //Review output 1
});
var directories = $.getJSON("/Directory/GetDirectories", function (data) {
return data; //Review output 2
});
})();
Output 1 (view a larger image at )
Output 2