Server Side Ajax data giving error Cannot read property 'length' of undefined

richb78uk

I am using asp.net core MVC with API and trying to get server side paging working with DataTables. I have got the API bit working and this is the code:

[HttpGet()]
        [EnableCors("policy")]
        [Route("paged")]
        public JsonResult GetPaginated(int? draw, int page = 0, int length = 20)
        {
            var totalRecords = 0;
            var totalFiltered = 0;
            var companies = _repository.GetCompaniesPaged(null, "CompanyName ASC", page, length, out totalRecords, out totalFiltered);
            var results = Mapper.Map<IEnumerable<CompanyListViewModel>>(companies);

            return Json(new { draw = draw, recordsFiltered = totalFiltered, recordsTotal = totalRecords, data = results });
        }

This is generating Json:
{"draw":1,"recordsFiltered":500,"recordsTotal":500,"data":[{"companyId":1,"companyName":"Test Company 0","companyRef":"TC0","town":"Wilmslow2","postcode":"SK9 3NH","generalTelephone":"01625 000000","website":"http://www.google.co.uk"},{"companyId":340,"companyName":"Test Company 1","companyRef":"TC1","town":"Wilmslow","postcode":null,"generalTelephone":"01625 000000","website":"http://www.google.co.uk"},{"companyId":331,"companyName":"Test Company 10","companyRef":"TC10","town":"Wilmslow","postcode":null,"generalTelephone":"01625 000000","website":"http://www.google.co.uk"},{"companyId":304,"companyName":"Test Company 100","companyRef":"TC100","town":"Wilmslow","postcode":null,"generalTelephone":"01625 000000","website":"http://www.google.co.uk"},{"companyId":303,"companyName":"Test Company 101","companyRef":"TC101","town":"Wilmslow","postcode":null,"generalTelephone":"01625 000000","website":"http://www.google.co.uk"},{"companyId":302,"companyName":"Test Company 102","companyRef":"TC102","town":"Wilmslow","postcode":null,"generalTelephone":"01625 000000","website":"http://www.google.co.uk"},{"companyId":301,"companyName":"Test Company 103","companyRef":"TC103","town":"Wilmslow","postcode":null,"generalTelephone":"01625 000000","website":"http://www.google.co.uk"},{"companyId":300,"companyName":"Test Company 104","companyRef":"TC104","town":"Wilmslow","postcode":null,"generalTelephone":"01625 000000","website":"http://www.google.co.uk"},{"companyId":299,"companyName":"Test Company 105","companyRef":"TC105","town":"Wilmslow","postcode":null,"generalTelephone":"01625 000000","website":"http://www.google.co.uk"},{"companyId":298,"companyName":"Test Company 106","companyRef":"TC106","town":"Wilmslow","postcode":null,"generalTelephone":"01625 000000","website":"http://www.google.co.uk"}]}

In my view the action method is

 [HttpPost]
        public async Task<ActionResult> getdata()
        {
            var draw = Request.Form["draw"].FirstOrDefault();
            var start = Request.Form["start"].FirstOrDefault();
            var length = Request.Form["length"].FirstOrDefault();

            var tokenClient = new TokenClient("http://localhost:5000/connect/token", "mvc", "secret");
            var tokenResponse = await tokenClient.RequestClientCredentialsAsync("api1");

            var client = new HttpClient(); client.SetBearerToken(tokenResponse.AccessToken); var
            content = await client.GetStringAsync("http://localhost:5001/api/companies/paged?draw=" + draw + "&page=" + start + "&length=" + length);

            return Json(content);
        }

My HTML is:

Company ID	Company Name	Account Ref	Town	Postcode	Telephone	Website	Actions

and the DataTable initialization is script is:

$(document).ready(function () {
            $('#CompaniesTable').DataTable({
                "processing": true,
                "serverSide": true,
                "filter": false,
                "orderMulti": false,
                "stateSave": true,
                "ajax": {
                    "url": "/companies/getdata",
                    "dataSrc": "data",
                    "type": "POST",
                    "datatype": "json"

                },
                "columns": [
                    { "data": "CompanyId", "name": "Company ID" },
                    { "data": "CompanyName", "name": "Company Name" },
                    { "data": "CompanyRef", "name": "Company Ref" },
                    { "data": "Town", "name": "Town" },
                    { "data": "Postcode", "name": "Postcode" },
                    { "data": "GeneralTelephone", "name": "Telephone", "orderable": false },
                    { "data": "Website", "name": "Website", "orderable": false }
                ],
                "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            var inner = '<a class="btn btn-xs btn-primary"><i class="fa fa-pencil"></i>View / Edit</a>' +
                                '<a class="btn btn-xs btn-danger datatable-delbtn" onclick="return ConfirmDelete(this, event);"><i class="fa fa-trash"></i>Delete</a>'

                            return inner;
                        },
                        "targets": -1
                    }
                ],
                "pagingType": "simple_numbers"
            });

This is generating : Uncaught TypeError: Cannot read property 'length' of undefined
at _fnAjaxUpdateDraw (jquery.dataTables.js:4104) as it seems the data is undefined, as though the Json format may not be valid in one example the data seems to use [ instead of { round each row of data.

I have noticed I might have some case issues with the field names in the initialization, but I don't think its getting that far yet.

any help would be much appreciated