Abdel-Rahman Shoman Abdel-Rahman Shoman - 5 months ago 444
jQuery Question

DataTables: Cannot read property 'length' of undefined

So I know this a popular issue and I have read all the similar questions here on Stackoverflow and other sites (including datatables site).

To clarify I am using


  • PHP Codeigniter

  • Materliazecss



I have also double checked and made sure that I managed to receive the JSON array correctly as following: (You may check it also on http://www.jsoneditoronline.org/)

[{"name_en":"hello","phone":"55555555","email":"a.shouman","facebook":"https:\/\/www.facebook.com"},{"name_en":"Mahfouz","phone":"00000000","email":"m.mahfouz","facebook":null},{"name_en":"Abdelrahman","phone":"55555555","email":"a.shouman","facebook":"https:\/\/www.facebook.com"},{"name_en":"ayman test","phone":"55554444","email":"a.shouman","facebook":"https:\/\/www.facebook.com"},{"name_en":"Abdelrahman Mossad Shouman Bootstrap","phone":"12345678","email":"a.shouman@mail.com","facebook":"https:\/\/www.facebook.com"},{"name_en":"Abdelrahman Mossad Shouman Bootstrap","phone":"12345678","email":"a.shouman@mail.com","facebook":"https:\/\/www.facebook.co"},{"name_en":"a.sharara","phone":"00000000","email":"a.sharara","facebook":""}]


So my html Table is as following

<table id="customer_table">
<thead>
<tr>
<th>Name</th>
<th>Contact</th>
<th>Email</th>
<th>Facebook</th>
</tr>
</thead>
</table>


And here is my document.ready function

$(document).ready(function(){
//$('#customer_table').DataTable();
$('#customer_table').DataTable( {
"ajax": 'json',
"dataSrc": "",
"columns": [
{ "data": "email" },
{ "data": "facebook" },
{ "data": "name_en" },
{ "data": "phone" }
]
});
});


The error I am getting is this

Uncaught TypeError: Cannot read property 'length' of undefined

Answer

OK, thanks all for the help.

However the problem was much easier than that.

All you I needed to do is to fix my JSON to assign the array to an attribute called data, as following.

{ "data": [{"name_en":"hello","phone":"55555555","email":"a.shouman","facebook":"https:\/\/www.facebook.com"},...] }
Comments