Populating Datatables with JSON array from GET request

Question

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...

Whitleather

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.net/dzjjrLz2 – Downwash

Yes, I have checked that - there is a request coming from the datatables which returns the correct data with status 200 OK – Whitleather

Answer 1

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.com/bins/14t4g",
            dataSrc : ''
        },
        "columns" : [ {
            "data" : "id"
        }, {
            "data" : "name"
        }, {
            "data" : "lat"
        }, {
            "data" : "lon"
        }]
    });
});

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

Barite

Answer 2

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"
        }]
    });
}); 

Beore

The json is not invalid - there is another service consuming it without any problems. I just cant get it work with datatables – Whitleather

So what is the cause of my problem? could you update your answer, please? – Whitleather