javascript - jQuery DataTables: Uncaught TypeError: Cannot read property 'length' of undefined - Stack Overflow

admin管理员组

文章数量:1305243

Code: On click of the submit button, once users enter the text, the application hits the rest API which has data in the format of JSON.The code should process the JSON data and from a jquery data table.

$(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'
                        ]
                    });
                });
            });

I am trying to form a Jquery data table from a restful API but getting the below error:

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 Response: Here is the format of Ajax ing from 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"
        }
      ]
    }

Can someone please throw light on why this is ing and what changes do I need to make?

Code: On click of the submit button, once users enter the text, the application hits the rest API which has data in the format of JSON.The code should process the JSON data and from a jquery data table.

$(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'
                        ]
                    });
                });
            });

I am trying to form a Jquery data table from a restful API but getting the below error:

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 Response: Here is the format of Ajax ing from 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"
        }
      ]
    }

Can someone please throw light on why this is ing and what changes do I need to make?

• javascript
• jquery
• jquery-plugins
• datatables

Share Improve this question Follow edited Jul 25, 2017 at 12:31 Gyrocode. 58.9k1616 gold badges156156 silver badges191191 bronze badges asked Jul 24, 2017 at 19:50 coder7coder7 4511 gold badge11 silver badge77 bronze badges 2

• Please show a sample of your Ajax response. – Gyrocode. Commented Jul 24, 2017 at 21:09
• @Gyrocode. : edited the question – coder7 Commented Jul 24, 2017 at 21:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Errors Unable to get property 'length' of undefined or null reference (IE) or Cannot read property 'length' of undefined (other browsers) with jQuery DataTables usually means that the plugin cannot access the data in response from Ajax request.

Use ajax.dataSrc option to specify data property (account) in your Ajax response containing the data.

Your code was also missing proper columns.data options.

Change your initialization options as follows:

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

See jQuery DataTables: Common JavaScript console errors for more information on this and other mon console errors.

本文标签： javascriptjQuery DataTables Uncaught TypeError Cannot read property 39length39 of undefinedStack Overflow