Question

72

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

rated 0 times [ 75] [ 3] / answers: 1 / hits: 22955 / 9 Years ago, fri, april 10, 2015, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

carlymykalac

Add To Favorites

Follow

Total Points: 740

Total Questions: 91

Total Answers: 91

Location: Sudan

Member since Thu, May 7, 2020

4 Years ago

answered 9 Years ago jackie · Accepted Answer

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.