Cannot read property length of undefined in Datatables

Question

I'm trying to show some data on a Datatable. The data is called from an Ajax request and the response is a Json array, it looks like this:

[{"item": "one", "price": 22, "status": "free"}, {"item": "two", "price": 15, "status": "taken"}]

And here is my request:

<script>
$(document).ready(function() {

  $('mytable').DataTable( {
      "ajax": "myurl",
      "dataType": 'json',
      "dataSrc": '',

      "columns": [
        {"data": "item" },
        {"data": "price" },
        {"data": "status"},  
    ]

  } );
} );
</script> 

And here is my HTML:

<table id="mytable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ITEM</th>
            <th>PRICE</th>
            <th>STATUS</th>
        </tr>
    </thead>
</table>

The issue is that the data is not being shown on the table. I think the problem happens when Datatables tries to handle my JSON data, since i'm getting this error on my console:

Uncaught TypeError: Cannot read property 'length' of undefined

Answer 1

First thing is that you don't need to make the table in HTML. Datatables creates the table.

Second thing is that you are not properly calling your table $('#mytable')

Third it doesn't seem like you are passing any data to the table:

Create a variable with your data: var data = [{"item": "one", "price": 22, "status": "free"}, {"item": "two", "price": 15, "status": "taken"}]

Add it to the table:

$('#mytable').DataTable( {
      "data": data,
      "columns": [
        {"data": "item" },
        {"data": "price" },
        {"data": "status"},  
    ]

  } );
} );

link to fiddle https://jsfiddle.net/edpbk0gc/3/

EDIT

Since you are doing an ajax call you will need to specify "ajax" instead of "data"

$('#mytable').DataTable( {
    ajax: {
        url: "/fetch_data",
        type: "GET",
        data: {
            id: id
        },
    },
    "columns": [
        {"data": "item" },
        {"data": "price" },
        {"data": "status"},  
    ]

  } );
} );

You basically just do your ajax call in there however you'd like.

Reference this doc.

Answer 2

Replace your table selector with $('#mytable') as @ricks mentioned and you need to match your json from the ajax to the format expected by datatables, something like this:

{ 
    data: [{"item": "one", "price": 22, "status": "free"}, {"item": "two", "price": 15, "status": "taken"}] 
}

Answer 3

I know it has been a while since the question was asked, but nevertheless, I think I know how to solve it.

The dataSrc property is in the wrong spot.

The "ajax" node in the datatable setup needs to be broken down into an object. Inside the object, you need to specify the dataSrc property and set it to empty string.

so, the new code should look like:

<script>
  $(document).ready(function() {
    $('mytable').DataTable( {
      "ajax": {      
        "url":"myurl",
        "type":"GET",
        "dataSrc": ""
      },
      "columns": [
        {"data": "item" },
        {"data": "price" },
        {"data": "status"},  
      ]
    });
  });
</script> 

Observe how the

"ajax": "myurl" 

is changed to

"ajax": {
  "url": "myurl",
  "type": "GET",
  "dataSrc": ""
}