Question

I have a page with multiple divs in it. I like to update the text inside these divs with the json response I get from the server.

The sample div looks like this

<div class="mprice" name="<?php echo $product['product_id']; ?>">
    <?php echo $product['price']; ?>
</div>

I have many of these divs on my page each one of them with a unique product_id as their name. I’m trying to update these prices every couple seconds.

So I have created an Ajax function that gets called on an interval to retrieve the new prices in json format.

json response that ajax is getting looks like this:

    {"products":[
    {"product_id":"43","price":"C$ 200.54"},
    {"product_id":"44","price":"C$ 928.08"},
    {"product_id":"46","price":"C$ 498.44"}

]}

Now I am trying to find a way to update all the prices in the div elements where their name is equal to the product_id with their corresponding price coming from json. I’m using jQuery. I’ve been on this for hours.

Answer 1

Have your success handler do something like this:

success: function( response ) {
    if( response && response.products ) {
        $.each( response.products,
            function( index, value ) {
            $( 'div[name="'+value.product_id+'"]' ).html( value.price );
            }
        );
    }
    else {
        console.log( "something went wrong :(", response );
    }
}