Loading contents with ajax and appending

Question

What I am doing is loading contents from a php file in json format

products.php

<?php 
    $stmt = $mysqli->prepare("SELECT * FROM products LIMIT 10");
    $stmt->execute();
    $products = $stmt->get_result();
    $product_array = array();
    while($product = $products->fetch_assoc()){
        $product_array[] = $product;
    }
    echo json_encode($product_array);
?>

home.php

<style>
.product
{
width: 100px;
height:100px;
margin-bottom: 10px;
}
</style>

<div class="product_area">
<div class="product">
    <h3>Product 1</h3>
    <p>Price: $10</p>
</div>
<div class="product">
    <h3>Product 2</h3>
    <p>Price: $10</p>
</div>
<div class="product">
    <h3>Product 3</h3>
    <p>Price: $10</p>
</div>
<div class="product">
    <h3>Product 4</h3>
    <p>Price: $10</p>
</div>
</div>

I have already 4 products in a product_area now I want to fetch the other products as soon as the document is loaded so I used ajax

$(document).ready(function()
{
    $.ajax(
    {
        url: 'product.php',
        dataType: 'JSON',
        success: function(data)
        {
            //This is where I am stucked. How do I append the new data beneath the current data in `product_area`. 
            for(i=0; i<=data.length; i++)
            {
            }
            window.History.pushState({urlPath:'&view=products'},"",'&view=product');
        }
    });
});

Also I am trying to push the state in the url with this window.History.pushState({urlPath:'&view=products'},"",'&view=product') but it doesn't push it means it doesn't show the url appended.

How it should be Before pushState url index.php?store=abc After pushState url index.php?store=abc&view=products

Can some one help me with this?

Answer 1

Try to do this:

products.php

<?php 
    header('Content-Type: application/json');

    $stmt = $mysqli->prepare("SELECT * FROM products LIMIT 10");
    $stmt->execute();
    $products = $stmt->get_result();
    $product_array = array();
    while($product = $products->fetch_assoc()){
        $product_array[] = $product;
    }

    echo json_encode($product_array);
?>

javascript - just clone the first div and then replicates

$(document).ready(function() {
    $.ajax({
        url: 'product.php',
        dataType: 'JSON',
        success: function(data) {
            //This is where I am stucked. How do I append the new data beneath the current data in `product_area`. 
            data.forEach(function (product) {
                var newProductBox = $('.product:first').clone();

                newProductBox.find('h3').text(product.nameInYourColumnDb);
                newProductBox.find('p').text('Price: $' + product.priceInYourColumnDb);

                $('.product_area').append(newProductBox);
            });

            window.History.pushState({urlPath:'&view=products'},"",'&view=product');
        }
    });
});

About the "pushState" take a look at this examples: https://developer.mozilla.org/en-US/docs/Web/API/History_API#Example_of_pushState()_method

Answer 2

Parse Json Data and Append It To product_area class

<script>
    $(document).ready(function()
    {
        $.ajax(
        {
            url: 'product.php',
            dataType: 'JSON',
            success: function(data)
            {
                var json = $.parseJSON(data);
                for(i=0; i<=json .length; i++)
                {
                   $('.product_area').append('<div class="product"><h3>Product Name: '+json[i].product_name+'</h3><p> Price :'+json[i].product_price+'</p></div>');    
                }
                window.History.pushState({urlPath:'&view=products'},"",'&view=product');
            }
        });
    });
    </script>