Ajax only retuen one value, but i need it to retun all the value that falls under one condition

Question

Ajax return only one product under range filter condition (products under price 68000) but actually database column price has more then one value under this range.

Here Database return result

public function Range(){
$conn=$this->makeConnection();
$query="select * from persons order by price desc";
$result = mysqli_query($this->conn,$query);
if(mysqli_num_rows($result) > 0){ 
     return $result;
     }else{
        echo "No results";
    }
}

Here i get the result in Html file

 <?php
    include("model/DALitem.php");
  $obj=new DALitem();
  $result=$obj->ViewData();
  $range=$obj->Range();
?>
  </div>
        <div align="center">
          <input type="range" min="0" max="100000" step="1000" value="1000" name="min_price" id="min_price">
          <span id="price_range"></span>
        </div>
        <br><br>
        <div class="row" id="product_loading">
          <?php 
            while ($row = mysqli_fetch_array($range)) {
             ?>
             <div class="col-3">
               <img <?php echo "src=\"assets/uploadedImages/".$row['file']."\""?> class="img img-fluid" style="height: 300px; width: 200px; background-color: teal">
                <h3><?php echo $row['name'] ?></h3>
               <h4>Price - <?php echo $row['price'] ?></h4>
                </div>
              <?php  
            }
          ?>
        </div>

Here is JQuery Script

    $(document).ready(function() {
   $('#min_price').change(function() {
    var price = $(this).val();
    $('#price_range').text('Product under price Rs. '+ price);
    $.ajax({
        url: 'load_product.php',
        type: 'POST',
        data: {price: price},
        success:function(data){
            $('#product_loading').html(data);
        console.log(data);
        }
    });
   });
  });

Here is load_product file to which Ajax interact

    <?php
include("model/config.php");
if (isset($_POST['price'])) {

    $output='';
    $query="select * from persons where price <=".$_POST['price']."";
    $result=mysqli_query($conn,$query);

    if(mysqli_num_rows($result) > 0){ 
        while ($row = mysqli_fetch_array($result)) {
             $output='
                <div class="col-3">
               <img src="assets/uploadedImages/'.$row['file'].'" class="img img-fluid" style="height: 300px; width: 200px; background-color: teal">
                <h3>'.$row['name'].'</h3>
               <h4>Price - '.$row['price'].'</h4>
                </div>
             ';
        }
    } else {
            $output='No Product Found';
            }
         echo $output;

}

?>

results under this code are

Answer 1

I'd suggest you change your code a little bit instead of loading the whole .php file go for a JSON approach

So in your DB return

return json_encode($result);

In your jQuery you can use $.each function that jQuery offers

$.getJSON("url_with_json_here", function(data){
    $.each(data, function (index, value) {
        console.log(value);
    });
});

source: JQuery Parsing JSON array

Doc : http://api.jquery.com/jquery.each/

So once your set up your $.each you can use jQuery's .append() function

Doc: http://api.jquery.com/append/

So in the end your jQuery code should look a bit like this

$(document).ready(function() {
    $('#min_price').change(function() {

        $("#product_loading .col-md-3").remove();

        $.getJSON("url_with_json_here", function(data){
            $.each(data, function (index, value) {
                $("#product_loading").append(`
                    <div class="col-md-3">
                        `+ value  +`
                    </div>
                    `);
            });
        });     

    });
});

Answer 2

Please check the changes, it should work now.

$output='';
$query="select * from persons where price <=".$_POST['price']."";
$result=mysqli_query($conn,$query);

if(mysqli_num_rows($result) > 0){ 
    while ($row = mysqli_fetch_array($result)) {
         $output .='
            <div class="col-3">
           <img src="assets/uploadedImages/'.$row['file'].'" class="img img-fluid" style="height: 300px; width: 200px; background-color: teal">
            <h3>'.$row['name'].'</h3>
           <h4>Price - '.$row['price'].'</h4>
            </div>
         ';
    }
} else {
        $output='No Product Found';
        }
     echo $output;} ?>