DataTables - Uncaught TypeError: Cannot read property 'length' of undefined

Question

I've seen several examples of this problem but still haven't been able to find a resolution.

The error says it breaks on jquery.dataTables.js (version 1.10.4) on line 3287 shown below

// Got the data - add it to the table
    for ( i=0 ; i<aData.length ; i++ ) {
        _fnAddData( settings, aData[i] );
    }

This is my controller. The controller is this way because the the lack of db connection right now, but will have JSON returned in the same format as $data. I have tried several things to resolve the error, but keep running into other issues. The JSON IS valid.

public function test()
{
  $data = '{"persons": [{"branch": "CORP","phone_numbers": [{"desk": "5223422117"},{"mobile": "5022319224"},{"branch": "422-922-2291"}],"email": "[email protected]","preferred_name": "Thomas","person_id": 368,"department": "IT","first_name": "Thomas","title": "Programming Manager","last_name": "Williams"}]}';

  $data = json_encode($data);
  echo $data;

}

My javascript

$(document).ready(function() {
     $('#directory_table').dataTable( {
         "ajax": {
             "url": "test",
             "type": "JSON"
         },
         "aoColumns": [
             { "persons": "preferred_name" },
             { "persons": "last_name" },
             { "persons": "phone_numbers.0" },
             { "persons": "phone_numbers.1" },
             { "persons": "phone_numbers.2" },
             { "persons": "email" },
             { "persons": "department" },
             { "persons": "title" }
         ]
     } );
 } );

My HTML

<table id='directory_table' class="display">
    <thead>
        <tr style='background: #186A9F; color: white;'>
            <th>First Name </th>
            <th>Last Name</th>
            <th>Desk Number</th>
            <th>Mobile</th>
            <th>Branch</th>
            <th>Email</th>
            <th>Department</th>
            <th>Title</th>
        </tr>
    <thead>
</table>

Gyrocode.com · Accepted Answer · 2017-09-04 16:14:33Z

CAUSE

By default DataTables expects JSON response to have certain structure, see documentation.

Array of arrays:

{
    "data": [
        [ "value1", "value2" ],
        ...
    ]
}

Array of objects:

{
    "data": [
        {
           "attr1": "value1",
           "attr2": "value2"
        },
        ...
    ]
}

Error occurs because name of the data property in your response holding array of objects (persons) differs from default (data).

SOLUTION

Use ajax.dataSrc option to define the property from the data source object (i.e. that returned by the Ajax request) to read.

$('#directory_table').dataTable( {
   "ajax": {
      "url": "test",
      "dataSrc": "persons"
   },
   "columns": [
      { "data": "preferred_name" },
      { "data": "last_name" },
      { "data": "phone_numbers.0.desk" },
      { "data": "phone_numbers.1.mobile" },
      { "data": "phone_numbers.2.branch" },
      { "data": "email" },
      { "data": "department" },
      { "data": "title" }
   ]
});

Alternatively if you can change data property name in JSON response from persons to data, then adding "dataSrc": "persons" wouldn't be needed.

DEMO

See this jsFiddle for code and demonstration.

LINKS

See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.

yes URL is correct on my side I was able to run the ajax, hit my controller, and my json was passing through the DataTables javascript. I will try this as soon as I get a chance. Thanks for your feedback.

Collectives™ on Stack Overflow

DataTables - Uncaught TypeError: Cannot read property 'length' of undefined

1 Answer 1

CAUSE

SOLUTION

DEMO

LINKS

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

CAUSE

SOLUTION

DEMO

LINKS

1 Comment

Related