Achraf Khouadja Achraf Khouadja - 6 months ago 15
HTML Question

jquery append mutiple lines to html from an object

This is what i have right now

$(document).ready(function() {
$.ajax({
type:"GET"
, url:'{{url("/api/getcart")}}'
, dataType:"json",
success: function(data){

$('#price').append(data.cartitems[1].product.price);
$('#qty').append(data.cartitems[1].qty);
$('#name').append('<a href=/product/'+data.cartitems[1].product.slug+'>'+data.cartitems[1].product.name+'<a>');


$('#subtotal').append(data.subtotal);
console.log(data)

}
, error: function(e) {
console.log(e)
}
});
});


HTML

<h2>Cart</h2>
<ul id="items" class="cd-cart-items">
<li>
<span id="qty" class="cd-price"></span>
<span class="cd-price">-</span>
<span id="name" class="cd-name"></span>
<div id="price" class="cd-price">$</div>
<a href="#" class="cd-item-remove cd-img-replace"><img
src="img/delete.svg"
alt="remove product from cart" height="10px" width="10px" />
</a>
</li>
</ul>


and it works fine but i need to make this dynamic, i mean if i had 2 items i cart this will still show only one
my js skills are far from good ,
the question here is :

how to make this append a new
<li>
for each object

Tom Tom
Answer

Ok so what you're asking is that you want the script to create a li element for each object. Please excuse my knowledge of JSON. I'll be the first to say that it's minimal. I would go with a for loop for this one. For this example, set the initial variable to i like so:

for (i=0; i <= *number of JSON objects*; i++) {
    //code here
}

With this piece of code, anything inside the brackets will be run once for each object. Now all you need to do is put this next bit of JavaScript in between the curly braces:

var price = '<div id="price" class="cd-price">$' + data.cartitems[i].product.price + '</div>';

var qty = '<span id="qty" class="cd-price">' + data.cartitems[i].qty + '</span>';

var name = '<a href="/product/' + data.cartitems[i].product.slug + '">' + data.cartitems[i].product.name + '</a>';

var html = '<li>' + qty + '<span  class="cd-price">-</span>' + name + price + '<a href="#" class="cd-item-remove cd-img-replace"><img src="img/delete" alt="remove product from cart" height="10px" width="10px" /></a></li>

$('#items').append(html);

This bit gathers the values of the objects and stores them in variables, to be used in the final append statement. You will notice that i have used i for the index in the data.cartitems[] sections. This will substitute i for what ever number the for loop is up to, and will then cycle through all of the objects. For example, if the for loop is up to it's second run through, i will equal 1. Why 1 and not 2, you ask? It's because indexing starts at 0.

The finished result is:

for (i=0; i <= *number of JSON objects*; i++) {
    var price = '<div id="price" class="cd-price">$' + data.cartitems[i].product.price + '</div>';

    var qty = '<span id="qty" class="cd-price">' + data.cartitems[i].qty + '</span>';

    var name = '<a href="/product/' + data.cartitems[i].product.slug + '">' + data.cartitems[i].product.name + '</a>';

    var html = '<li>' + qty + '<span  class="cd-price">-</span>' + name + price + '<a href="#" class="cd-item-remove cd-img-replace"><img src="img/delete" alt="remove product from cart" height="10px" width="10px" /></a></li>

    $('#items').append(html);
}

The HTML part only needs to be:

<h2>Cart</h2>
<ul id="items" class="cd-cart-items"></ul>

Hopefully this helps, and makes sense.

Comments