Estoy tratando de usar el complemento de tablas de datos con datos de api, obtengo los datos con fetch javascript, ¿necesito async await para almacenar los datos en tablas de datos? el resultado no es un error, simplemente no mostrará los datos, ya puse la inicialización de las tablas de datos dentro de la función asíncrona, ¿cómo lo hago correctamente?

código HTML :

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

obtener código:

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