Adding contents of Array to HTML of a div JS

Question

I am working on the ordering process for a site and I am experimenting with having an order alert box displayed in the window at all times.

Currently I have this box set to show how many items are in your order.

I would like to display the name of the product and the qty in this box also.

Below is the code that controls this box:

$(document).ready(function(){
    //if cookie exists, show the panel
    if($.cookie('order_cookie') != undefined){
    productArray = JSON.parse($.cookie('order_cookie'));
    $(".order-alert").show();

    for(var i = 0; i < productArray.length; i++){
       console.log(productArray[i]);
       var obj = productArray[i];
       console.log("Object code: " + obj.stockCode + " Qty: " + obj.quantity);
    }

    $('#order_counter').html(productArray.length);
    }
});

The console.log is printing the correct data, I guess it's just a case of inserting the data into the html

The HTML for the box is:

<section class="order-alert">
                <a href="xxxx">Your Order</a>
                <p>You have <span id="order_counter">0</span> items in your order</p>
    </section>

I would like to display the contents of the order below the counter but I'm not sure how I would do that.

So, for each order you would like a list below to show the contents? If so you can use jQuerys append method. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jun 12, 2014 at 15:02

Jay Blanchard · Accepted Answer · 2014-06-12 15:08:59Z

1

Just add append to your code -

for(var i = 0; i < productArray.length; i++){
   console.log(productArray[i]);
   var obj = productArray[i];
   console.log("Object code: " + obj.stockCode + " Qty: " + obj.quantity);
   $('.order-alert').append('<p>Object code: ' + obj.stockCode + ' Qty: ' + obj.quantity + '</p>');
}

answered Jun 12, 2014 at 15:08

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Javacadabra Over a year ago

That's a great solution, thank you I don't know why I didn't think of doing something like that. I don't suppose you'd know how to update the list every time an item is added? Or is that for another question perhaps?

Jay Blanchard Over a year ago

That is another question because there are likely different actions involved.

Joseph Dailey · Accepted Answer · 2014-06-12 15:05:26Z

1

Simply use the append on the div you want to put them in.

$("#myDiv").append($("<p>Object code: "+obj.stockCode+" Qty: "+obj.quantity+"</p>"));

You can put any html string in the jquery fragment initializer. { $(" < html > ") }

answered Jun 12, 2014 at 15:05

Joseph Dailey

4,9352 gold badges18 silver badges18 bronze badges

5 Comments

Jay Blanchard Over a year ago

jQuery Fragment Initializer?

Joseph Dailey Over a year ago

What would you prefer me to call it? I've never seen it called anything other than this. (in stack traces)

Jay Blanchard Over a year ago

It's the jQuery object. But it can be used by other libraries too.

Joseph Dailey Over a year ago

Pardon me, It's a Dom fragment. As in, "Jquery's fragment initializer". So it's not wrong.

Jay Blanchard Over a year ago

It's OK @JosephDailey - I just read it and laughed a little because it sounded like some sort of sci-fi weaponry.

Collectives™ on Stack Overflow

Adding contents of Array to HTML of a div JS

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related