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

Your tables id is 'open' and your JS is trying to find `$('mytable')` — ricks, Nov 21 '19 at 22:54
Does this answer your question? [DataTables: Cannot read property 'length' of undefined](https://stackoverflow.com/questions/34287402/datatables-cannot-read-property-length-of-undefined) — Rafael Herscovici, Nov 21 '19 at 23:09

ricks · Answer 1 · 2019-11-22T18:35:14.770

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.

edited Nov 22 '19 at 18:35

answered Nov 21 '19 at 23:11

ricks

3,154
31
51

You can reference this example if your data source is in JS: https://datatables.net/examples/data_sources/js_array.html – ricks Nov 21 '19 at 23:14
@Dementic fixed link, also didn't notice you could add resources on fiddle like that, thanks for the heads up. – ricks Nov 21 '19 at 23:18
Wait, my data source is not a variable. I'm retrieving the data to use on the table from an URL, so how can i use it in a variable? – Jack022 Nov 22 '19 at 14:04
Are you fetching it via an ajax call? you can pass the data from wherever its coming from and assign it to a variable and pass it to a method that creates your table. If you are using AJAX it will be a little different – ricks Nov 22 '19 at 14:12
Yes, i'm fetching it via an ajax call – Jack022 Nov 22 '19 at 17:32

score 0 · Answer 2 · answered Nov 21 '19 at 23:17

0

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"}] 
}

answered Nov 21 '19 at 23:17

iamdlm

1,885
1
11
21

`you need to match your json from the ajax to the format expected by datatables` not correct, it can be custom https://datatables.net/forums/discussion/41385/custom-json-format – Rafael Herscovici Nov 21 '19 at 23:19
I know but I supposed it's pretty simple to fix the format instead of using the `ajax.dataSrc` option, otherwise no one would have to ask for help in implementing it. – iamdlm Nov 21 '19 at 23:48

score 0 · Answer 3 · edited Apr 27 '22 at 19:23

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": ""
}

Cannot read property length of undefined in Datatables

3 Answers3