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.
New Json Format
 
{
"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"
}
]
}