Question

14

jQuery DataTables: Uncaught TypeError: Cannot read property 'length' of undefined

rated 0 times [ 15] [ 1] / answers: 1 / hits: 15540 / 7 Years ago, mon, july 24, 2017, 12:00:00

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 coming 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 coming and what changes do I need to make?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

chase

Add To Favorites

Follow

Total Points: 78

Total Questions: 106

Total Answers: 93

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

chase questions

1 How to set the download file extension for blob data

Thu, Mar 31, 22, 00:00, 2 Years ago

1 React changing react-icon color on mouse hover

Thu, Jul 1, 21, 00:00, 3 Years ago

1 Passing Objects as Argument to GraphQL Mutation (graphql-request)

Sun, Dec 20, 20, 00:00, 3 Years ago

1 how to get data from response from fetch javascript request

Sat, Dec 12, 20, 00:00, 4 Years ago

1 CSS select all previous siblings for a star rating

Mon, Sep 14, 20, 00:00, 4 Years ago

View All

answered 7 Years ago lesli · Accepted Answer

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 common console errors.