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

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

SroDavoSroDavo Posts: 2Questions: 1Answers: 0

Link to test case:
Debugger code ( 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({
  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">
              <th class="w-33">Note Key</th>
              <th class="w-33">Word Type</th>              

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

Thanks in advance!

This question has an accepted answers - jump to answer


  • kthorngrenkthorngren Posts: 19,511Questions: 26Answers: 4,624
    Answer ✓

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


  • SroDavoSroDavo Posts: 2Questions: 1Answers: 0

    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.

Sign In or Register to comment.