title: Load Async Data in Jquery Datatable
body: <p>I am trying to load data from a remote URL like below: </p>
  
  <pre><code>const getPeople = async () =&gt; {
              const data = await fetch('https://randomurl', {
                  method: 'GET',
                  headers: {
                      'Content-Type': 'application/json',                                  
                  }
              });
              const jsondata = await data.json();
              console.log(jsondata);
              return jsondata;
          }
  </code></pre>
  
  <p>Here's my datatable: </p>
  
  <pre><code>    $(document).ready(function () {
  
          var table = $("#records").DataTable({
  
              data: getPeople(),
              columns: [
  
                  {
                      data: "NAME",
                  },
  
                  {
                      data: "SCHOOL",
                  },
                  {
                      data: "CLASS"
                  },
                  {
                      data: "CITY"
                  }
              ]
          });
      });
  </code></pre>
  
  <p>I am not getting any error when I load the page. However, my datatable is empty. I have verified that the getPeople() function does return json data. Am I missing anything? </p>
  
  <p>The console.log(jsondata) displays the data 2 or 3 seconds after the datatable is created. So how can I display/create the datatable after getting the data? </p>
  
  <p>Here's the returned json: </p>
  
  <pre><code>[
   {"NAME":"joe","SCHOOL":"Rogers","CLASS":8,"CITY":"Sisily"},
   {"NAME":"sam","SCHOOL":"Matt","CLASS":6,"CITY":"Monaco"}
  ]
  </code></pre>