DataTables fails to display Ajax data

user_6440363 0
Viewed 331

I'm trying to display data from Ajax source, using this HTML:

<table class="table-striped data-table" data-src="https://my.site/json-url" data-columns='["id","sku","name","base_stock","stock","sales"]'>
    <thead>
        <tr>
            <th>ID</th>
            <th>SKU</th>
            <th>Name</th>
            <th>Initial Stock</th>
            <th>Current Stock</th>
            <th>Sales</th>
        </tr>
    </thead>
</table>

And this JS:

$('.data-table').each(function(){
    var src = $(this).data('src');
    var cols = $(this).data('columns').map(x => {return {data: x};});
    $(this).DataTable({
        "responsive": true,
        "ajax": src,
        "columns": cols
    });
});

Where, https://my.site/json-url normally responds with:

{
  "status": "success",
  "data": [
    {
      "id": 1515,
      "sku": "",
      "name": "Test Simple",
      "base_stock": 10,
      "stock": 10,
      "sales": 0
    },
    {
      "id": 1512,
      "sku": "BWTEST",
      "name": "Test Variable - Black / White",
      "base_stock": 9,
      "stock": 9,
      "sales": 0
    },
    {
      "id": 1513,
      "sku": "CLRTEST",
      "name": "Test Variable - Multi-Color",
      "base_stock": 4,
      "stock": 4,
      "sales": 0
    }
  ]
}

However, I'm getting the error: Uncaught TypeError: cannot use 'in' operator to search for "length" in "id" at jquery.min.js:2:1065. Could someone help with this?

NOTE: I can see that no ajax request is actually made to https://my.site/json-url so the error appears to be happening even prior to ajax call.

datatables jquery ajax
1 Answers

Your custom data- tags are conflicting with the datatables data- tags.

https://www.datatables.net/manual/options#HTML-5-data-attributes

DataTables can also use initialisation options read from HTML5 data-* attributes. This provides a mechanism for setting options directly in your HTML, rather than using Javascript

Rename your data- attributes and you'll be fine (as long as you don't pick another conflicting name...)

For confirmation, removing everything to the bare minimum, to rule out the ajax and datatables options also gives the error:

$('.data-table').each(function() {
  $(this).DataTable({
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

<table class="table-striped data-table" data-src="https://my.site/json-url" data-columns='["id","sku","name","base_stock","stock","sales"]'>
</table>

while changing your data- attribute names removes the error

$('.data-table').each(function() {
  $(this).DataTable({
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

<table class="table-striped data-table" data-my-src="https://my.site/json-url" data-my-columns='["id","sku","name","base_stock","stock","sales"]'>
</table>

(don't use -my- it's just for demonstration)

user_21815140
Related