I'm currently working on a project where I've integrated a datatable, but I'm encountering this error: 'Uncaught TypeError: Cannot read properties of undefined (reading 'length'). I've received the following JSON array, and I've made sure that I'm receiving the JSON array.
Old json
[
{
"createdAt": "0001-01-01T00:00:00",
"id": 1,
"name": "Mobile",
"price": 252
}
]
Here is my datatable code
$(document).ready(function () {
$('#productTable').DataTable({
"ajax": {
"url": "/Product/GetAllProducts",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "price" },
{ "data": "createdAt" },
{
"data": null,
"render": function (data, type, row) {
return "<button class='btn btn-info' onclick='EditProduct(" + data.id + ")'>Edit</button> | <button class='btn btn-danger' onclick='DeleteProduct(" + data.id + ")'>Delete</button>";
}
}
]
});
});
After searching lot on the internet, I found the solution. I need to restructure my JSON to assign the array to an attribute called 'data', as shown below.{
"data": [
{
"id": 1,
"name": "Mobile ",
"price": 252,
"createdAt": "0001-01-01T00:00:00"
},
{
"id": 3,
"name": "Book",
"price": 125,
"createdAt": "2024-03-09T20:30:35.8953118"
}
]
}