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

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0