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

Question

I am working on my ASP.Net web application where I need to populate an HTML table with an Ajax data source, for which I use the 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 calling to get a JSON response of a 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 to me fine, as described on the official jQuery DataTables website http://www.datatables.net/examples/ajax/objects.html

But the data is not populated in the table, and I get the following error in the Firebug console

TypeError: f is undefined

Answer 1

jQuery DataTables Ajax, .

{ 
   "data": [

   ]
}

, ajax.dataSrc (d ).

ASP.NET, , JSON.

JavaScript:

$('#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" }
    ]
});

. jQuery DataTables: JavaScript .