I have an array with a variable amount of rows that I'm trying to create a table of. The table will be inside a popup window (SweetAlert), and the rows come from an AJAX call that is grabbing a PHP database query. The query is sent over and is viewable with console.log, but I don't know how to format the and to loop as many times as needed, preferably with just the html and 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>`
})
}
})
There are only two columns in the db call/table. I can probably get the length just fine, just not sure how to create it all in the html portion of the Swal.fire() call.
I have properly "assembled" your code. Try this
$.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>`
})
}
})
The question is already answered so instead of answering I'll leave a similar scenario that uses the same logic to display data but this one is from an API call since from the OP code there's no way to view how to handle actually data result.
//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>I just needed to make a string with the html in it in the javascript section, if anyone else comes across the same question.
$.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>`
})
}
})