MVC5 not passing JSON property names through to view - json

Question

I'm just starting out with MVC, JSON, AJAX, etc and as a side project have been trying to create a data viz dashboard.
Today I followed this guide on how to pass a simple table of data from SQL as JSON to my view: http://techfunda.com/howto/292/list-records-using-json
It mostly worked: the JsonResult comes through from my controller and contains the values but not the property names.
This causes a problem because I'm referencing the property names when I process the data for display in JavaScript.
Here's the SQL data:
Here's my Model:
public partial class vw_Dash_ChartData : IEnumerable<object>
{
[Key]
[JsonProperty(PropertyName = "Classification")]
public string Classification { get; set; }
[JsonProperty(PropertyName = "Count")]
public int Count { get; set; }
public IEnumerator<object> GetEnumerator()
{
yield return Classification;
yield return Count;
}
System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
{
return this.GetEnumerator();
}
}
(You'll notice I tried to manually set the [JsonProperty(...)] stuff...it didn't help.)
And here's my JsonResult:
public JsonResult ChartDataJson()
{
var data = new List<vw_Dash_ChartData>();
data = db.vw_Dash_ChartDatas.ToList();
var jsonData = Json(data, JsonRequestBehavior.AllowGet);
return jsonData;
}
(Initially I was sending the data straight through from my DbContext but then thought perhaps it would help to use my vw_Dash_ChartData model. It didn't make a difference).
My view looks like the following:
#{
ViewBag.Title = "Charts";
AjaxOptions options = new AjaxOptions
{
//Confirm = "Are you sure?",
LoadingElementId = "divLoading",
OnSuccess = "processDataMethod",
Url = Url.Action("ChartDataJson")
};
}
<script type="text/javascript">
function processDataMethod(data) {
var output = $("#dataZone");
output.empty();
for (var i = 0; i < data.length; i++) {
var chartData = data[i];
output.append("<tr><td>" + chartData.Classification + "</td><td>" + chartData.Count + "</td></tr>");
}
}
</script>
<div>
<table>
<thead>
<tr>
<th>Classification</th>
<th>Count</th>
</tr>
</thead>
<tbody id="dataZone">
</tbody>
</table>
</div>
#using (Ajax.BeginForm(options))
{
<div id="divLoading" style="color: red; font-size: larger;">
Loading...
</div>
<div>
<button type="submit" id="btnClicky" >Clicky</button>
</div>
}
<script>
$("#btnClicky").trigger("click");
</script>
When I load the page, this is what I get:
and this is the JSON object shown in the browser developer tools;
Any tips/ideas gratefully received! Also, if I'm doing anything stupid do let me know as I'd like to learn best practice for this stuff.

Answer 1

How about?
var jsonData = Json(data.Select(x=> new {
Classification = x.Classification,
Count = x.Count
})
);
return jsonData;