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

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: http://jsfiddle.net/dzjjrLz2/ — Rory McCrossan, Oct 27 '15 at 08:09
Yes, I have checked that - there is a request coming from the datatables which returns the correct data with status 200 OK — Smajl, Oct 27 '15 at 08:17

score 15 · Accepted Answer · answered Oct 27 '15 at 11:41

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/

Shailendra Sharma · Answer 2 · 2015-10-27T09:07:06.353

0

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

edited Oct 27 '15 at 09:07

answered Oct 27 '15 at 08:07

Shailendra Sharma

6,976
2
28
48

The json is not invalid - there is another service consuming it without any problems. I just cant get it work with datatables – Smajl Oct 27 '15 at 08:10
So what is the cause of my problem? could you update your answer, please? – Smajl Oct 27 '15 at 08:51

Populating Datatables with JSON array from GET request

2 Answers2

Linked