Uncaught TypeError: Cannot read property 'length' of undefined -

erwin16

This error is raised after the ajax callback and the table displays correctly ... raised by

                                   // Got the data - add it to the table          
                for ( i=0 ; i<aData.length ; i++ ) {
                    _fnAddData( settings, aData[i] );
                }

I guess that something is wrong with the data returned from ajax json request, even if the table is correctly filled ..
js code

      $.getJSON(ajaxUrl, function(data){ 

        console.log(JSON.stringify(data.columns, null, 2));
        console.log(JSON.stringify(data.rows, null, 2));

        var table = $('#companies').DataTable( {
            language: { url: langUrl },
            ajax: ajaxUrl,
            dataSrc: 'rows',
            info: false,
            select: true,
            columnDefs: [ { targets: [ 1 ], visible: false, searchable: false }],
            data: data.rows,
            columns: [
                  {className: 'details-control', orderable: false, data: null, defaultContent: ''},
                  { title: data.columns[0], data: "id" },
                  { title: data.columns[1], data: "name" },
                  { title: data.columns[2], data: "position" },
                  { title: data.columns[5], data: "office" },
                  { title: data.columns[3], data: "salary" }
            ],
            order: [[2, 'asc']]
          } );

json data rendered as json from a Ruby server :

       @columns = [ "id", "name" , "position" , "salary" , "start_date" , "office", "extn" ]
       @rows = [
           {
             id: 1,
             name: "Tiger Nixon",
             position: "System Architect",
             salary: "$320,800",
             start_date: "2011/04/25",
             office: "Edinburgh",
             extn: "5421"
           },
           {
             id: 2,
             name: "Garrett Winters",
             position: "Accountant",
             salary: "$170,750",
             start_date: "2011/07/25",
             office: "Tokyo",
             extn: "8422"
           },
           {
             id: 3,
             name: "Donna Snider",
             position: "Customer Support",
             salary: "$112,000",
             start_date: "2011/01/25",
             office: "New York",
             extn: "4226"
           }
         ]

       @data = { columns: @columns, rows: @rows }.with_indifferent_access
               render json: @data

checking console on ajax callback

    console.log(JSON.stringify(data.columns, null, 2));

    [
      "id",
      "name",
      "position",
      "salary",
      "start_date",
      "office",
      "extn"
    ]

    console.log(JSON.stringify(data.rows, null, 2));
    [
      {
        "id": 1,
        "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "extn": "5421"
      },
      {
        "id": 2,
        "name": "Garrett Winters",
        "position": "Accountant",
        "salary": "$170,750",
        "start_date": "2011/07/25",
        "office": "Tokyo",
        "extn": "8422"
      },
      {
        "id": 3,
        "name": "Donna Snider",
        "position": "Customer Support",
        "salary": "$112,000",
        "start_date": "2011/01/25",
        "office": "New York",
        "extn": "4226"
      }
    ]

erwin16

wrong copy/paste !!

in my table init , I still have :

     ajax: ajaxUrl,

from a previous script ... so it's sending a wrong second ajax request which is raising the error ... my fault !!!!

ThomD

When I was chasing that error, my problem was an extra comma at the end of an object declaration. I don't see one in your copy paste, but I'd double check your source code.

allan

dataSrc: 'rows',

ajax.dataSrc should be nested inside the ajax object. See the examples at the bottom of the ajax.dataSrc page.

One thing, defining both data and ajax seems a little redundant to me. That would cause the Javascript added data to be immediately replaced by the Ajax sourced data.

Allan

erwin16

yes Allan you are right .. the ajax option is what messed up my code ( I forgot to remove it after a copy/paste from a previous script )
the data option is also redundant ...

erwin16

Thanks Thom , I'll better check my copy / paste ...