Working with JSON data.. why are all properties of my object undefined?

I am attempting to take the Name and ID fields from each object, but the fields are appearing undefined.

function OnHistoricalListBoxLoad(historicalListBox) {
    $.getJSON('GetHistoricalReports', function (data) {
        historicalListBox.trackChanges();
        $.each(data, function () {
            var listBoxItem = new Telerik.Web.UI.RadListBoxItem();
     开发者_Python百科       listBoxItem.set_text(this.Name);
            listBoxItem.set_value(this.ID);
            historicalListBox.get_items().add(listBoxItem);
        });
        historicalListBox.commitChanges();
    });
}

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult GetHistoricalReports()
{
    List<HistoricalReport> historicalReports = DashboardSessionRepository.Instance.HistoricalReports;

    var viewModel = historicalReports.Select(report => new
    {
        ID = report.ID,
        Name = report.Name
    }).ToArray();

    return Json(viewModel, JsonRequestBehavior.AllowGet);
}

I know that I am returning the data successfully, and I know that there is valid data. I am new to MVC/JavaScript, though.. I checked case sensitivity to ensure that I wasn't making just an easy mistake, but it does not seem to be the issue. Am I missing something more complex?

Inspecting the HTTP Response JSON tab in Chrome I see:

0: {ID:1, Name:PUE} 1: {ID:2, Name:Weight} 2: {ID:3, Name:Power Actual vs Max} 3: {ID:4, Name:Power Actual}

No idea, but passing such behemoth domain models to views is very bad practice. This is so kinda domain polluted that it has nothing to do in a view. In a view you work with views models. View models contain only what a view needs. In this case your view needs an ID and a Name. So pass a view model with only those single simple properties to this view:

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult GetHistoricalReports()
{
    var reports = DashboardSessionRepository.Instance.HistoricalReports;
    var reportsViewModel = reports.Select(x => new
    {
        ID = x.ID,
        Name = x.Name
    }).ToArray();
    return Json(reportsViewModel, JsonRequestBehavior.AllowGet);
}

Now, not only that you will save bandwidth, but you will get some clean JSON:

[ { ID: 1, Name: 'Foo' }, { ID: 2, Name: 'Bar' }, ... ]

through which you will be able to loop using $.each.

UPDATE:

Now that you have shown your JSON data it seems that there is a Content property which represents the collection. So you need to loop through it:

$.each(data.Content, ...);

and if you follow my advice about the view models your controller action would become like this:

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult GetHistoricalReports()
{
    var report = DashboardSessionRepository.Instance.HistoricalReports;
    var reportsViewModel = report.Content.Select(x => new
    {
        ID = x.ID,
        Name = x.Name
    }).ToArray();
    return Json(reportsViewModel, JsonRequestBehavior.AllowGet);
}

and now loop directly through the returned collection:

$.each(data, ...);