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.

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.