I know that there has been many answers and tutorials about populating Jquery Datatables with data but I always get to the point of getting the following exception:

Uncaught TypeError: Cannot read property 'length' of undefined

I, being mainly a backend developer, have little to no experience with writing client so I would like to ask you about what I am doing wrong in the following example.

I have a server running locally exposing an endpoint /destination which responds with a JSON string in this format:

[{
    "id": 1,
    "name": "London Heathrow",
    "lat": 51.470022,
    "lon": -0.454295
}, {
    "id": 2,
    "name": "London Gatwick",
    "lat": 51.153662,
    "lon": -0.182063
}, {
    "id": 3,
    "name": "Brussels Airport",
    "lat": 50.900999,
    "lon": 4.485574
}, {
    "id": 4,
    "name": "Moscow Vnukovo",
    "lat": 55.601099,
    "lon": 37.266456
}]

I would like to display these data in a table using the Datatables plugin. This is the table code:

<table id="example" class="display" cellspacing="0" width="100%">
     <thead>
         <tr>
             <th>ID</th>
             <th>Name</th>
             <th>Lattitude</th>
             <th>Longitude</th>
         </tr>
        </thead>
 </table>

And script to populate it:

$(document).ready(function() {
    $('#example').DataTable({
        "processing" : true,
        "ajax" : {
            "url" : ".../destination",
            "type" : "GET"
        },
        "columns" : [ {
            "data" : "id"
        }, {
            "data" : "name"
        }, {
            "data" : "lat"
        }, {
            "data" : "lon"
        }]
    });
});

As specified above, I am getting the Uncaught TypeError: Cannot read property 'length' of undefined. Any help is appreciated.

EDIT: It works if I do a request for the data and then pass the data to the datatables as follows:

$.ajax({
            url : '/AOS-project/destination',
            type : 'GET',
            dataType : 'json',
            success : function(data) {
                assignToEventsColumns(data);
            }
        });

        function assignToEventsColumns(data) {
            var table = $('#example').dataTable({
                "bAutoWidth" : false,
                "aaData" : data,
                "columns" : [ {
                    "data" : "id"
                }, {
                    "data" : "name"
                }, {
                    "data" : "lat"
                }, {
                    "data" : "lon"
                } ]
            })
        }

I was expecting the datatables to have this functionality baked in...

I know that there has been many answers and tutorials about populating Jquery Datatables with data but I always get to the point of getting the following exception:

Uncaught TypeError: Cannot read property 'length' of undefined

I, being mainly a backend developer, have little to no experience with writing client so I would like to ask you about what I am doing wrong in the following example.

I have a server running locally exposing an endpoint /destination which responds with a JSON string in this format:

[{
    "id": 1,
    "name": "London Heathrow",
    "lat": 51.470022,
    "lon": -0.454295
}, {
    "id": 2,
    "name": "London Gatwick",
    "lat": 51.153662,
    "lon": -0.182063
}, {
    "id": 3,
    "name": "Brussels Airport",
    "lat": 50.900999,
    "lon": 4.485574
}, {
    "id": 4,
    "name": "Moscow Vnukovo",
    "lat": 55.601099,
    "lon": 37.266456
}]

I would like to display these data in a table using the Datatables plugin. This is the table code:

<table id="example" class="display" cellspacing="0" width="100%">
     <thead>
         <tr>
             <th>ID</th>
             <th>Name</th>
             <th>Lattitude</th>
             <th>Longitude</th>
         </tr>
        </thead>
 </table>

And script to populate it:

$(document).ready(function() {
    $('#example').DataTable({
        "processing" : true,
        "ajax" : {
            "url" : ".../destination",
            "type" : "GET"
        },
        "columns" : [ {
            "data" : "id"
        }, {
            "data" : "name"
        }, {
            "data" : "lat"
        }, {
            "data" : "lon"
        }]
    });
});

As specified above, I am getting the Uncaught TypeError: Cannot read property 'length' of undefined. Any help is appreciated.

EDIT: It works if I do a request for the data and then pass the data to the datatables as follows:

$.ajax({
            url : '/AOS-project/destination',
            type : 'GET',
            dataType : 'json',
            success : function(data) {
                assignToEventsColumns(data);
            }
        });

        function assignToEventsColumns(data) {
            var table = $('#example').dataTable({
                "bAutoWidth" : false,
                "aaData" : data,
                "columns" : [ {
                    "data" : "id"
                }, {
                    "data" : "name"
                }, {
                    "data" : "lat"
                }, {
                    "data" : "lon"
                } ]
            })
        }

I was expecting the datatables to have this functionality baked in...

• javascript
• jquery
• json
• datatables-1.10

• Have you checked the console to ensure that the AJAX request is working and returning the data you expect? If you provide the object to Datatables directly, then your code works fine: jsfiddle/dzjjrLz2 – Rory McCrossan Commented Oct 27, 2015 at 8:09
• Yes, I have checked that - there is a request ing from the datatables which returns the correct data with status 200 OK – Smajl Commented Oct 27, 2015 at 8:17

2 Answers 2

Set dataSrc to ''. As the documentation states :

Get JSON data from a file via Ajax, using dataSrc to read data from a plain array rather than an array in an object:

$(document).ready(function() {
    $('#example').DataTable({
        "processing" : true,
        "ajax" : {
            "url" : "https://api.myjson./bins/14t4g",
            dataSrc : ''
        },
        "columns" : [ {
            "data" : "id"
        }, {
            "data" : "name"
        }, {
            "data" : "lat"
        }, {
            "data" : "lon"
        }]
    });
});

and your code works -> http://jsfiddle/nzn5m6vL/

If you code working with hard json than try it

$(document).ready(function() {
    $('#example').DataTable({
        processing : true,
        ajax: {
                url: "/api/venues",
                "type" : "GET"
                dataSrc: function (json) {
                    var obj = JSON.parse(json);
                    console.log(obj);
                    return obj;
                 }
            },
        columns : [ {
            data : "id"
        }, {
            data : "name"
        }, {
            data : "lat"
        }, {
            data : "lon"
        }]
    });
});