Geek Answers Handbook

Populating Datatables with a JSON Array from a GET Request

I know that there have been many answers and tutorials about populating Jquery Datatables with data, but I always get the opportunity to get the following exception:

Uncaught TypeError: Unable to read property 'length' from undefined

Being the main developer of the backend, I have practically nothing to do with writing a client, so I would like to ask you about what I am doing wrong in the following example.

I have a server running local publishing of the /destination endpoint, which responds to 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 this 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 a 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 stated above, I get Uncaught TypeError: Cannot read property 'length' of undefined . Any help is appreciated.

EDIT: it works if I do a data query and then pass the data to that data 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 expected data to have this functionality baked in ...

+6
source share
2 answers

Set dataSrc to '' . Because the documentation reads:

Get JSON data from a file via Ajax, using dataSrc to read data from a simple array , not 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/

+8
source

If the code works with hard json, than try

 $(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" }] }); });
0
source

More articles:


All Articles