I am facing an issue while trying to integrate the "FooTable" plugin with ajax calls. Everything works perfectly fine when I directly input the JSON data or load it from a JSON file using $.get('....json'). However, when attempting to fetch the table content from my server, I consistently encounter the error message "Cannot read property 'name' of null." Details of this error can be found here:
Error message
The provided image also displays the JSON data logged in the Console. Despite numerous attempts to load it in various ways (both backend and frontend), I have been unable to resolve the issue. Some of my attempts are commented out in the accompanying Code.
JavaScript:
$(document).ready(function () {
jQuery(function ($) {
var ft = FooTable.init('.table', {
"columns": $.get('/js/mycols.json'),
//"rows": $.get('/js/myrows.json')
"rows": $.get('/api/GetEvents', function (e) {
console.log(JSON.parse(e.value));
//ft.rows.load(JSON.parse(e.value));
}, "json")
});
//$.ajax({
// url: "/api/GetEvents",
// dataType: "json",
// type: "GET"
//}).done(function (e) {
// console.log(e);
// ft.rows.load(e.value);
//})
});
});
ASP.NET Backend:
List<JObject> objList = new List<JObject>();
foreach (var e in events)
{
JObject jObj = JObject.FromObject(new
{
name = e.Name,
veranstaltungstyp = e.Type,
startzeit = e.StartTime.ToString("H:mm - dd MMMM yyyy"),
ende = e.EndTime.ToString("H:mm - dd MMMM yyyy"),
erstelltvon = e.CreatedBy.FirstName + " " + e.CreatedBy.LastName,
render = "placeholder"
});
objList.Add(jObj);
}
var result = new JsonResult(JsonConvert.SerializeObject(objList));
result.ContentType = "json";
result.StatusCode = 200;
result.SerializerSettings = new JsonSerializerOptions();
return Json(result);