jQuery DataTables：Uncaught TypeError：無法讀取未定義的屬性'長度'

Question

代碼：點擊提交按鈕，一旦用戶輸入文本，應用程序就會擊中其餘的API，其數據格式爲JSON。代碼應該處理JSON數據並從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' 
         ] 
        }); 
       }); 
      }); 

我試圖形成從寧靜的API jQuery的數據表，但得到下面的錯誤：

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響應：這是阿賈克斯從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" 
     } 
     ] 
    } 

有人可以請說明爲什麼會出現這種情況，我需要做些什麼改變？

Answer 1

帶有jQuery DataTables的錯誤Unable to get property 'length' of undefined or null reference（IE）或Cannot read property 'length' of undefined（其他瀏覽器）通常意味着插件無法訪問數據以響應Ajax請求。

使用ajax.dataSrc選項可以在包含數據的Ajax響應中指定數據屬性（account）。

您的代碼也丟失了正確的columns.data選項。

更改初始化選項如下：

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

關於這個問題和其他共同控制檯錯誤的詳細信息，請參閱jQuery DataTables: Common JavaScript console errors。