i'm trying to use datatables plugin with data from api, i get the data with fetch javascript, do i need async await to store the data into datatables ? the result is no error just it won't show the data, i already put the datatables inialization inside the async function how do i do it properly ?

html code :

<table id='myTable' class="table table-inverse table-danger">
    <thead>
    <tr>
        <td>Index</td>
        <td>Value</td>
    </tr>
    </thead>
    <tbody class"demo">
    </tbody>
</table>

fetch code :

  var url = 'http://192.168.150.155:9900/meikel/_search/';

async function getapi(url) {

      const response = await fetch('http://192.168.150.155:9900/meikel/_search', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + btoa('elastic:7d76bd7b7ca96905e0195b2f3ecd1449b9b98f58be7c71ed7549739990fad6a8')
    },
    body: JSON.stringify({
        size: 10000,
        "query": {
            "match_all": {}
        }
        })
    })

      var data = await response.json();
      
      if (response) {

      }

      var i = 0;

      for(let i = 0; i < data.hits.hits.length; i++) {

      }

      let name = "";
      let company = "";

      for (let i = 0; i < data.hits.hits.length; i++) {
        name += "<tr '> <td><img style='width: 50px;' src='"+ data.hits.hits[i]._source.imagepath + "'></td>"+ "<td><a href='employees/?id="+ data.hits.hits[i]._id +"' class='text-dark text-decoration-none'><p href='employees/'>" + data.hits.hits[i]._source.name + "</p></a></td>"  + "<td>" + data.hits.hits[i]._source.nip + "</td>" + "<td>" + data.hits.hits[i]._source.companycode + "</td>" + "<td>" + data.hits.hits[i]._source.organization.division + "</td>" + "<td>" + data.hits.hits[i]._source.employee.status + "</td>" + " </tr>";

      }

      document.getElementsByClassName("demo")[0].innerHTML = name;

      $(document).ready( function () {
          $('#myTable').DataTable();
      } );

      }

getapi(url);