jQuery DataTables: Uncaught TypeError: Impossible de lire la propriété 'length' de undefined

Question

Code: Au clic du bouton submit, une fois que les utilisateurs entrent le texte, l'application frappe l'API restante qui a des données au format JSON. Le code devrait traiter les données JSON et d'une table de données jquery.

$(document).ready(function() { 
       $('#txt').click(function() { 
        var requestData = $('#txtid').val(); 
        var url = '<my api url>' + requestData; 
        $('#resultDiv1').dataTable({ 
         "processing": true, 
         "ajax": url, 
         "columns": [ 
          {"": "account.id"}, 
          {"": "account.rel"}, 
          {"": "account.fin"}, 
          {"": "account.date"} 
         ], 
         "dom": "Bfrtip", 
         "buttons": [ 
          'copy', 'csv', 'excel', 'pdf', 'print' 
         ] 
        }); 
       }); 
      }); 

Je suis en train de former une table de données Jquery à partir d'une API reposant mais obtenir l'erreur ci-dessous:

Uncaught TypeError: Cannot read property 'length' of undefined 
      at jquery.dataTables.min.js:48 
      at i (jquery.dataTables.min.js:35) 
      at Object.success (jquery.dataTables.min.js:35) 
      at fire (jquery-1.12.4.js:3232) 
      at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362) 
      at done (jquery-1.12.4.js:9840) 
      at XMLHttpRequest.callback (jquery-1.12.4.js:10311) 

Ajax Réponse: Voici le format d'Ajax en provenance de RestAPI:

{ 
     "account": [ 
     { 
      "id": "1", 
      "rel": "P", 
      "fin": "abc", 
      "date": "2001-01-05" 
     }, 
     { 
      "id": "2", 
      "rel": "P", 
      "fin": "def", 
      "date": "2001-02-05" 
     }, 
     { 
      "id": "3", 
      "rel": "R", 
      "fin": "ghi", 
      "date": "2019-01-05" 
     } 
     ] 
    } 

Quelqu'un peut-il éclaircir pourquoi cela arrive et quels changements dois-je faire?

Answer 1

Les erreurs Unable to get property 'length' of undefined or null reference (IE) ou Cannot read property 'length' of undefined (autres navigateurs) avec jQuery DataTables signifie généralement que le plugin ne peut pas accéder aux données en réponse à une requête Ajax.

Utilisez l'option ajax.dataSrc pour spécifier la propriété de données (account) dans votre réponse Ajax contenant les données.

Votre code manquait également les bonnes options columns.data.

modifier vos options d'initialisation comme suit:

$('#resultDiv1').dataTable({ 
    // ... skipped other options ... 
    "ajax": { 
     "url": url, 
     "dataSrc": "account" 
    }, 
    "columns": [ 
     {"data": "id"}, 
     {"data": "rel"}, 
     {"data": "fin"}, 
     {"data": "date"} 
    ] 
}); 

Voir jQuery DataTables: Common JavaScript console errors pour plus d'informations sur ce sujet et d'autres erreurs de la console commune.