wypełniania DataTables z JSON tablicy z żądania GET

Question

wiem, że nastąpiło wiele odpowiedzi i samouczki na temat wypełniania Jquery Datatables z danymi, ale zawsze dotrzesz do punktu otrzymuję następujący wyjątek:

Uncaught TypeError: Cannot read property 'length' of undefined

ja, będąc głównie programista backendu, mają niewielkie lub żadne doświadczenie w pisaniu klienta, więc chciałbym zapytać o to, co robię źle w poniższym przykładzie.

mam serwer działa lokalnie wystawiając punkt końcowy /destination który reaguje z ciągiem JSON w tym formacie:

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

Chciałbym wyświetlić te dane w tabeli za pomocą wtyczki DataTables. Jest to kod tabela:

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

I skrypt, aby go wypełnić:

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

Jak określono powyżej, otrzymuję Uncaught TypeError: Cannot read property 'length' of undefined. Każda pomoc jest doceniana.

EDIT: To działa, jeśli to zrobię wniosek o dane, a następnie przekazać dane do DataTables następująco:

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

Spodziewałem się DataTables, że ta funkcjonalność pieczone w ...

Answer 1

Ustaw dataSrc do ''. Jak documentation stanach:

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

i kod działa ->http://jsfiddle.net/nzn5m6vL/

Answer 2

Jeśli kod działa z dysku json niż spróbować

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