title: Populating Datatables with JSON array from GET request
body: <p>I know that there has been many answers and tutorials about populating Jquery <a href="https://www.datatables.net/" rel="noreferrer">Datatables</a> with data but I always get to the point of getting the following exception:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'length' of undefined</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>I have a server running locally exposing an endpoint <code>/destination</code> which responds with a JSON string in this format:</p>
  
  <pre><code>[{
      "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
  }]
  </code></pre>
  
  <p>I would like to display these data in a table using the Datatables plugin. This is the table code:</p>
  
  <pre><code>&lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
       &lt;thead&gt;
           &lt;tr&gt;
               &lt;th&gt;ID&lt;/th&gt;
               &lt;th&gt;Name&lt;/th&gt;
               &lt;th&gt;Lattitude&lt;/th&gt;
               &lt;th&gt;Longitude&lt;/th&gt;
           &lt;/tr&gt;
          &lt;/thead&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>And script to populate it:</p>
  
  <pre><code>$(document).ready(function() {
      $('#example').DataTable({
          "processing" : true,
          "ajax" : {
              "url" : ".../destination",
              "type" : "GET"
          },
          "columns" : [ {
              "data" : "id"
          }, {
              "data" : "name"
          }, {
              "data" : "lat"
          }, {
              "data" : "lon"
          }]
      });
  });
  </code></pre>
  
  <p>As specified above, I am getting the <code>Uncaught TypeError: Cannot read property 'length' of undefined</code>. Any help is appreciated.</p>
  
  <p>EDIT: It works if I do a request for the data and then pass the data to the datatables as follows:</p>
  
  <pre><code>$.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"
                  } ]
              })
          }
  </code></pre>
  
  <p>I was expecting the datatables to have this functionality baked in...</p>