Datatables: Cannot read properties of undefined (reading 'length')

Question

I am having trouble setting up datatables using an ajax request. At present I'm getting an error in the console stating: datatables.min.js:16 Cannot read properties of undefined (reading 'length'). I've ensursed that the JSON is valid in the response from my API, but for some reason it is not being read into the table. I've included my code below. Does anyone have any suggestions?

I have looked at the solutions already on SO but none have worked so far.

HTML:

<div class="spares-admin-dashboard" ng-controller="SparesAdminDashboardController as vm">
    <table id="order-table" class="table">
        <thead>
            <tr>
                <th scope="col">Web Order No.</th>
                <th scope="col">Customer Ref.</th>
                <th scope="col">Created Date</th>
                <th scope="col">Delivery Date</th>
                <th scope="col">Order Val.</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

JS:

angular.module("umbraco").controller("SparesAdminDashboardController", function ($scope) {
    var vm = this;

    $('#order-table').DataTable({
        ajax: {
            url: '/umbraco/backoffice/api/sparesadmin/getorders',
            dataSrc: 'data'
        },
        columns: [
            { data: 'web_order_no' },
            { data: 'customer_ref' },
            { data: 'created_date' },
            { data: 'delivery_date' },
            { data: 'order_value' },
            { data: 'status' }
        ]
    });
});

C# Controller method:

// GET: SparesAdminController
[HttpGet]
public JsonResult GetOrders()
{ 
    string data = System.IO.File.ReadAllText(@"C:\\projects\\AdvisorExtranet\\Website\\App_Plugins\\sparesAdmin\\example.json");

    return new JsonResult(data);

}

JSON:

{
    "data" :[
        {
          "web_order_no": "#2381296",
          "customer_ref": "EliteBlinds",
          "created_date": "01/01/23",
          "delivery_date": "01/02/23",
          "order_value": "£462.28",
          "status": "Unsubmitted"
        },
        {
          "web_order_no": "#2381297",
          "customer_ref": "EliteBlinds",
          "created_date": "02/01/23",
          "delivery_date": "02/02/23",
          "order_value": "£162.28",
          "status": "Submitted"
        },
        {
          "web_order_no": "#2381298",
          "customer_ref": "MyBlinds",
          "created_date": "21/01/23",
          "delivery_date": "28/02/23",
          "order_value": "£462.28",
          "status": "Unsubmitted"
        },
        {
          "Web Order No.": "#2381299",
          "customer_ref": "TheirBlinds",
          "created_date": "04/02/23",
          "delivery_date": "17/04/23",
          "order_value": "£162.28",
          "status": "Submitted"
        }
    ]
}

You are reading a json file and returning from your controller, did you try changing the `return JsonResult` to `return Ok()` or normal string result ? See also this [answer](https://stackoverflow.com/questions/42360139/asp-net-core-return-json-with-status-code) — Anand Sowmithiran, Aug 03 '23 at 13:47
Also, in your javascript, set the `dataSrc` property to empty string , while making the ajax call. By default, the datatables library looks for unnamed array, or array of objects under 'data' root element. — Anand Sowmithiran, Aug 03 '23 at 14:04

Datatables: Cannot read properties of undefined (reading 'length')

0 Answers0