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   `&nbsp;&nbsp;&nbsp;`   endDate   `<br>
                            <table >
                            <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.

CodePudding user response：

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}&nbsp;&nbsp;&nbsp;${endDate}<br>
            <table >
                <tbody>
                    ${rows.join('')}
                </tbody>
            </table>`
        })
    }
})

CodePudding user response：

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 >'  
        '<thead><th>Country</th><th>Covid-19 Cases</th></thead>'  
        '<tbody >'  
        
        '</tbody>'  
         '</table>'
})

        $('.table-body').html(tableRows);
        }
    })
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/sweetalert2.all.min.js"></script>

CodePudding user response：

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   `&nbsp;&nbsp;&nbsp;`   endDate   `<br>
                            <table >
                            <tbody>
                                `   input   `
                            </tbody>
                            </table>`
                        })
                    }
                })