How to Generate DataTable with Json Data - ajax

Question

I have API Call abd which will be returning Json like below
{
"status": true,
"message": "Data Sent",
"data": [
{
"id": 9,
"name": "North",
"colType": 7,
"userID": 0,
"isVisible": false
}
]
}
And below i have JavaScript Ajax Call but it is returning Empty datatable please do help
$('#myTable').DataTable({
destroy: true,
responsive: true,
"ajax": {
"url": url+'/api/CommonMasters/7/GetByUserID/'+#ViewBag.UID,
"type": "GET",
"datatype": "json",
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columns": [
{ "data": "name", "autoWidth": true },
{
"render": function (data, type, full, meta) { return "<a id='Edit' class='btn btn-info' onclick='editRefUser(" + full.id + ")' ;>Edit</a>"; }
},
]
});

Answer 1

In the ajax section, you need to define your data source: "dataSrc": "data".
"ajax": {
"url": url+'/api/CommonMasters/7/GetByUserID/'+#ViewBag.UID,
"type": "GET",
"datatype": "json",
"dataSrc": "data"
},
Why is this needed? Your JSON data structure does not have a "name" item at the top level. Names are nested inside the top-level "data" object. This extra directive tells DataTables to look only at the JSON's "data" object as its starting point.
See here for the related documentation:
The ajax option basically inherits all of the options made available by jQuery.ajax, but we provide the extra option of dataSrc to provide the ability to alter what data DataTables will read from the JSON returned from the server...
Also, on an unrelated note, I don't think you need this: destroy: true - try removing it. It probably does not make sense to try to destroy the table object while you are initializing it.