Ajax data source (objects) :TypeError: f is undefined

Question

I am working on my ASP.Net web application where I have to populate an HTML table with Ajax data source for which I am making a use of jQuery DataTables plugin.

HTML code:

<table class="table table-striped table-hover table-bordered display" id="example" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Prctice Group Risk No
            </th>
            <th>Practice_Group
            </th>
            <th>Risk_Category
            </th>
        </tr>
    </thead>
</table>

JavaScript Code:

$('#example').DataTable({
    "ajax": {
        "dataType": 'json',
        "contentType": "application/json; charset=utf-8",
        "type": "POST",
        "url":"index.aspx/Risky"
    },
    "columns": [
        { "data": "Prctice_Group_Risk_No" },
        { "data": "Practice_Group" },
        { "data": "Risk_Category" }]
});

And here is my Web Method I am making a call to to get a JSON response of list of objects

 [WebMethod]
 [ScriptMethod]
    public static string Risky()
    {
        return JsonConvert.SerializeObject(riskList);
    }

JSON response from server:

d:"[{"Prctice_Group_Risk_No":1,"Practice_Group":"M&A","Risk_Category":"Conflicts of Interests"},{"Prctice_Group_Risk_No":2,"Practice_Group":"abc","Risk_Category":"Client Care and Communication"}]

The JSON response returned seems fine to me as described in the official site of jquery DataTables http://www.datatables.net/examples/ajax/objects.html

But no data is been populated in the table and I get the following error in my Firebug Console

TypeError: f is undefined

Answer 1

By default, jQuery DataTables expects Ajax sourced data in the following format.

{ 
   "data": [

   ]
}

If data format differs, you need to use ajax.dataSrc to define data property for table data (d in your example).

I'm not ASP.NET expert but it seems that you encode your data in JSON format twice.

For your current server-side code, try this JavaScript code:

$('#example').DataTable({
    "ajax": {
        "dataType": 'json',
        "contentType": "application/json; charset=utf-8",
        "type": "POST",
        "url":"index.aspx/Risky",
        "dataSrc": function (json) {
           return $.parseJSON(json.d);
        }
    },
    "columns": [
        { "data": "Prctice_Group_Risk_No" },
        { "data": "Practice_Group" },
        { "data": "Risk_Category" }
    ]
});

See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.