Struggling to bind JSON data - JQuery Datatables - json

Question

I am struggling to bind the JSON data into a Datatable. This is my Javascript code.
$.ajax({
type: "POST",
data: $('#searchForm').serialize(),
url: "/ReportingItem/Search",
success: function (data) {
$('#searchResults').DataTable({
data: data,
dataSrc: "",
columns: [
{ "data": "ID" },
{ "data": "ItemContent" }
]
});
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr.status == 404) {
alert(thrownError);
}
}
});
This is my JSON
"[{"ID":"3","ItemContent":"2nd Test"},{"ID":"4","ItemContent":"3rd Test"},{"ID":"9","ItemContent":"eeeeee"},{"ID":"11","ItemContent":"aaaa"}]"
You can see its a flat array. therefore I have used dataSRC="" so it doesn't look for "data" in the JSON
This is the error message I am getting
DataTables warning: table id=searchResults - Requested unknown
parameter 'ID' for row 0, column 0. For more information about this
error, please see http://datatables.net/tn/4
Any help on the Syntax would be helpful!
Thanks
Chris

Answer 1

Just add in the data line
$('#searchResults').DataTable({
data: JSON.parse(data),
....
});
JSON.parse

Answer 2

Just you have to check what json objects return in ReportingItem/Search.
as you mention:
"[{"ID":"3","ItemContent":"2nd Test"},{"ID":"4","ItemContent":"3rd Test"},{"ID":"9","ItemContent":"eeeeee"},{"ID":"11","ItemContent":"aaaa"}]"
in most case json format is camel notation format. it means object names start with lowercase. so you should make some changes in WebApiConfig or if its not api in a config which you set : ReportingItem/Search
add this to the method Register:
using System.Web.Mvc;
using System.Web.Routing;
public static void Register(HttpConfiguration config)
{
var Settings = config.Formatters.JsonFormatter.SerializerSettings;
Settings.ContractResolver = new CamelCasePropertyNamesContractResolver();
Settings.Formatting = Formatting.Indented;
//... other codes
}
at the end instead of
columns: [
{ "data": "ID" },
{ "data": "ItemContent" }
]
use this:
columns: [
{ "data": "iD" },
{ "data": "itemContent" }
]
hope its done.