CODEWITHSUNDEEP
phphtmltwitter-bootstrap
mvasco
mvasco

Reputation: 5107

Bootstrap table not showing the data properly

I am trying to show a bootstrap table that shows PHP Session items.

This is my code:

<?php
session_start();

$total_price = 0;
$total_item = 0;
?>
<!DOCTYPE html>
<html>
<head>
    <title>Sdocks</title>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>



</head>
<body>
    <div class="container">
        <?php

        $output = '
        <div class="table-responsive" id="order_table">
        <table class="table table-bordered table-striped">
        <tr>  
        <th width="10%">Product Id</th>
        <th width="40%">Product Name</th>  
        <th width="10%">Quantity</th>  

        <th width="20%">Price</th>  
        <th width="15%">SubTotal</th>  
        <th width="5%">Action</th>  
        </tr>
        ';

        if(!empty($_SESSION["shopping_cart"]))
        {
            foreach($_SESSION["shopping_cart"] as $keys => $values)
            {
                $output .= '
                <tr>
                <td>'.$values["product_id"].'</td>
                <td>'.$values["product_name"].'</td>
                <td>'.$values["product_quantity"].'</td>

                <td align="right">$ '.$values["product_price"].'</td>
                <td align="right">$ '.number_format($values["product_quantity"] * $values["product_price"], 2).'</td>
                <td><button name="delete" class="btn btn-danger btn-xs delete" id="'. $values["product_id"].'">Remove</button></td>
                </tr>
                ';
                $total_price = $total_price + ($values["product_quantity"] * $values["product_price"]);
                $total_item = $total_item + 1;
            }
            $output .= '
            <tr>  
            <td colspan="3" align="right">SubTotal</td>  
            <td align="right">$ '.number_format($total_price, 2).'</td>  
            <td></td>  
            </tr>
            ';
        }
        else
        {
            $output .= '
            <tr>
            <td colspan="5" align="center">
            Your Cart is Empty!
            </td>
            </tr>
            ';
        }
        $output .= '</table></div>';
        $data = array(
            'cart_details'      =>  $output,
            'total_price'       =>  '$' . number_format($total_price, 2),
            'total_item'        =>  $total_item
        );  

        echo json_encode($data);
        ?>
    </div>
</body>
</html>

My issue is that the output is not the expected:

enter image description here

What am I doing wrong in my code?

Upvotes: 1

Views: 723

Answers (2)

Obzi
Obzi

Reputation: 2390

You display a JSON (json_encode). I don't understand why.
To get your table, just echo $output;

Upvotes: 2

user9077625
user9077625

Reputation:

@Bazaim is right. json_encode does not make sense in this code because it is already encoded to HTML. Now you have a double encode.

If you want just the JSON, you have to encode the text to HTML chars with the htmlspecialchars function.

Upvotes: 3

Related Questions