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>

Answer 1

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.