json ajax with mulitple pdo query

[kitsontam]

Below $pdo is the sum of price output to html output which is success. How can i list out each entry for this total price?
I know the sql should use "SELECT t.table_type, price, start_time, end_time FROM table_booking b JOIN tables t USING (table_id) WHERE date(end_time) = curdate()".

PHP code

elseif ($_GET['ajax'] == 'getReceipts')  {
        $res = $pdo->query("SELECT t.table_type
                                 , sum(price) as total
                            FROM table_booking b
                                 JOIN
                                 tables t USING (table_id)
                            WHERE date(end_time) = curdate()
                            GROUP BY table_type     
                           ");

        $tots = [ '1'=>0, '2'=>0 ];
        foreach ($res as $r) {
            $tots[$r['table_type']] = $r['total'];
        }
        $resp['snTot'] = number_format($tots['1'], 2);
        exit(json_encode($resp));
}

ajax code

    $("#show-receipts").click( function() {
        $.get(
            "",
            {"ajax":"getReceipts"},
            function(resp) {
                $.each(resp, function(k, v) {
                    $("#"+k).html(v)
                })
            },
            "JSON"
        )
        $("#modalRecpts").show()
    })

html output

<div class='w3-modal' id='modalRecpts'>
        <div class='w3-card-4 w3-modal-content w3-sand'>
            <div class="w3-container w3-purple">
              <h3>Today's Receipts</h3>  
              <span onclick="document.getElementById('modalRecpts').style.display='none'"
              class="w3-button w3-display-topright">×</span>
            </div>
            <div class='w3-container w3-padding'>
              <table class='w3-table'>
              <tr><th>Snooker</th><td id='snTot' class='w3-right-align'>$0.00</td></tr>
              </table>
            </div>
        </div>
    </div>

 

[Michalio]

You are iterate each key in the object that you retrieving from backend. You need to check that if the value is string or number and then do what you are doing now (putting to the html) and if its an object (an array fir example) you can generate different output (the list) and after that put it to the html. You can create that transform based on type or name. If the name is one of the listed then transform the object to the list in html string otherwise put unchanged value

 

[kitsontam]

Thanks for the reply, i have no idea, any example or hints for me please.

 

[Michalio]

You need change this part:

                $.each(resp, function(k, v) {
                    $("#"+k).html(v)
                })

You can change it to:

                $.each(resp, function(k, v) {
                    var html = prepareHtml(k, v);
                    $("#"+k).html(html);
                })
                ...
function prepareHtml(key, value) {
    switch (key) {
      case 'name':
       return prepareHtmlForName(value);
    }
    return value;
}

And you need to write the prepareHtmlForName function yourself