Data Load Problem: same data works via data: but fails via ajax:

SroDavo

Link to test case: https://live.datatables.net/siyoniva/1/edit
Debugger code (debug.datatables.net): efotez (it's giving me a 404 despite successful uploads - there were no warning or errors)
Error messages shown: "Cannot read properties of undefined (reading 'length')"
Description of problem:
My datatables is not working with ajax calls, but it does with with the same dataset if it's loaded as a variable.

My API returns the following:

[
  {
    "_id": "62cee0f8e9a70db315fad20c",
    "noteKey": "arbo",
    "wordType": "*Nouns"
  }
]

When configured to use ajax to this API, Datatables gives an error: "Cannot read properties of undefined (reading 'length')" and fails to load the data.

HOWEVER, when I copy and paste this value into a data variable, the datatable loads just fine.

This failes:

var notestable = $('#notebrowser-list').DataTable({
  ajax:'/api/wip',
  columns: [
    {data: 'noteKey'},
    {data: 'wordType'},
  ]    
})

But this works:

var anote = [{"_id":"62cee0f8e9a70db315fad20c","noteKey":"arbo","wordType":"*Nouns"}];

var notestable = $('#notebrowser-list').DataTable({
  data: anote,
  columns: [
    {data: 'noteKey'},
    {data: 'wordType'},
  ]    
})

Here, I've just copy-and-pasted the value from the API directly to the variable assignment. (I loaded the API url in a browser and copied the value from there)

The HTML seems to be fine as it's working with the data: method, but for completeness here is the table:

<div class="table-responsive-sm">
  <table id="notebrowser-list" class="w-100 table table-sm table-striped table-bordered table-hover">
      <thead class="thead-dark">
          <tr>
              <th class="w-33">Note Key</th>
              <th class="w-33">Word Type</th>              
          </tr>       
      </thead>
  </table>
  </div>

Can anyone help me understand why the ajax load of the same data is failing?

Thanks in advance!

kthorngren

I would say you need to use ajax.dataSrc to point to your Ajax data. See the Ajax docs for details.

Kevin

SroDavo

Thank you @kthorngren ! I had tried that, but as it turns out I had been doing it incorrectly. A closer read of the link you provided got me sorted.