Заполнение DataTables с JSON массив из запроса GET

Question

Я знаю, что там было много ответов и учебники о заселении Jquery Datatables с данными, но я всегда получаю до точки получаю следующее исключение:

Uncaught TypeError: Cannot read property 'length' of undefined

я, будучи в основном, разработчик бэкэнда, практически не имеют опыта написания клиента, поэтому я хотел бы спросить вас о том, что я делаю неправильно в следующем примере.

У меня есть сервер, работающий локально подвергая конечную точку /destination реагирующей со строкой JSON в этом формате:

[{ 
    "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 
}] 

Я хотел бы, чтобы отобразить эти данные в таблице, используя плагин DataTables. Это таблица кодов:

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

И сценарий для его заполнения:

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

Как было указано выше, я получаю Uncaught TypeError: Cannot read property 'length' of undefined. Любая помощь приветствуется.

EDIT: Это работает, если сделать запрос для данных, а затем передать данные в DataTables следующим образом:

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

Я ожидал DataTables, что эта функциональность запеченная в ...

Answer 1

dataSrc Набор для ''. Как documentation состояний:

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

и ваш код работает ->http://jsfiddle.net/nzn5m6vL/

Answer 2

Если код работы с жестким, чем JSON попробовать его

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