DataTables warning: Requested unknown parameter "FileName"... using Json - ajax

Question

I have a view which loads the script:
var dataTable;
$(document).ready(function () {
loadDataTable();
});
function loadDataTable() {
dataTable = $('#DT_load').DataTable({
"ajax": {
"url": "/musicfiles/getall/",
"type": "GET",
"datatype": "json"
},
"columns": [
{
"data": "albumartpath",
"render": function (data) {
return `<img src="~/images/" + ${data} ?? "noimage.webp" asp-append-version="true" height="50" width="50" />`;
}, "width": "20%"
},
{ "data": "filename", "width": "20%" },
{ "data": "title", "width": "20%" },
{ "data": "artist", "width": "20%" },
{ "data": "genre", "width": "20" }
],
"language": {
"emptyTable": "no data found"
},
"width": "100%"
});
}
and a MusicFilesController function which returns a Json:
[HttpGet]
public async Task<IActionResult> GetAll()
{
JsonResult json = Json(new { data = await _context.MusicFiles.ToListAsync() });
return json;
}
but when I load the page, I get the error:
DataTables warning: table id=DT_load - Requested unknown parameter 'FileName' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4
The Json is correctly formatted using strings but I cannot figure out what I am missing. I have looked through about a dozen other posts with similar issues but have not found the answer.

Answer 1

Requested unknown parameter 'FileName' for row 0, column 1.
In your code, we can find that you specify columns.data option with { "data": "filename", "width": "20%" }, if the data source object item(s) with key fileName like below (not filename you specified), which would cause the issue.
{"albumartpath":"https://xxxx/xxx","fileName":"xxx","title":"xxx","artist":"xxx","genre":"xx"}
So please double check the received data on client side and make sure you set the data source for the column correctly.