Tengo una matriz con una cantidad variable de filas de las que estoy tratando de crear una tabla. La tabla estará dentro de una ventana emergente (SweetAlert), y las filas provienen de una llamada AJAX que está obteniendo una consulta de base de datos PHP. La consulta se envía y se puede ver con console.log, pero no sé cómo formatear y repetir tantas veces como sea necesario, preferiblemente solo con html y js.
$.ajax({ url:"../model/test.php", data: {'order-startDate': startDate, 'order-endDate' : endDate, 'order-custId' : custId}, type: 'GET', success: function(result){ result = JSON.parse(result); console.log(result); Swal.fire({ html: `<p><h5>` + custId + `</h5></p><br>` + startDate + ` ` + endDate + `<br> <table class="table-datatable display responsive nowrap table-bordered table-striped"> <tbody>`, //This is the idea of what I'm trying to accomplish for (let index = 0; index < result.length; ++index) { `<tr> <td>` + result[index]['item'] + `</td> <td>`+result[index]['count']+`</td> </tr>` } `</tbody> </table>` }) } })Solo hay dos columnas en la llamada/tabla de db. Probablemente pueda obtener la longitud bien, pero no estoy seguro de cómo crearlo todo en la parte html de la llamada Swal.fire().
He "ensamblado" correctamente su código. Prueba esto
$.ajax({ url:"../model/test.php", data: {'order-startDate': startDate, 'order-endDate' : endDate, 'order-custId' : custId}, type: 'GET', success: function(result){ result = JSON.parse(result); console.log(result); // create the result as array of rows let rows = result.map(obj => `<tr><td>${obj.item}</td><td>${obj.count}</td></tr>`); Swal.fire({ html: `<p><h5>${custId}</h5></p><br>${startDate} ${endDate}<br> <table class="table-datatable display responsive nowrap table-bordered table-striped"> <tbody> ${rows.join('')} </tbody> </table>` }) } })La pregunta ya está respondida, así que en lugar de responder, dejaré un escenario similar que usa la misma lógica para mostrar datos, pero este es de una llamada API ya que desde el código OP no hay forma de ver cómo manejar realmente el resultado de los datos.
//I can't make an AJAX call to your data source (`test.php`) so instead I'll make an API call and display the data in a table on a SweetAlert popup $( document ).ready(function() { var tableRows = ''; $.ajax({ url: 'https://api.covid19api.com/summary', contentType: "application/json", dataType: 'json', success: function(result){ for(let i = 0; i < result.Countries.length; i++){ tableRows += '<tr><td>'+result.Countries[i]['Country']+'</td><td>'+result.Countries[i]['TotalConfirmed']+'</td></tr>'; } Swal.fire({ title: '<strong><u>Covid Cases Per Country</u></strong><br/>', icon: 'info', html: '<table class="table-datatable display responsive nowrap table-bordered table-striped w-100">' + '<thead><th>Country</th><th>Covid-19 Cases</th></thead>' + '<tbody class="table-body">' + '</tbody>' + '</table>' }) $('.table-body').html(tableRows); } }) }); <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.0/dist/sweetalert2.all.min.js"></script>Solo necesitaba hacer una cadena con el html en la sección de javascript, si alguien más se encuentra con la misma pregunta.
$.ajax({ url:"../model/test.php", data: {'order-startDate': startDate, 'order-endDate' : endDate, 'order-custId' : custId}, type: 'GET', success: function(result){ result = JSON.parse(result); console.log(result); let input = ""; for (let i = 0; i < result.length; i++) input += `<td>` + result[i]['item_sku'] + `</td><td>`+result[0]['count']+`</td>`; Swal.fire({ html: `<p><h5>` + custId + `</h5></p><br>` + startDate + ` ` + endDate + `<br> <table class="table-datatable display responsive nowrap table-bordered table-striped"> <tbody> ` + input + ` </tbody> </table>` }) } })