Displaying Images from a Javascript Array

Question

I am creating a JS snippet to display an overlay on a webpage and need to scrape the images, save them to a variable, and display them on a overlay.

I currently have the images I need in an array:

var itemImages = $(".itemImg img");
var imageArray = [];
for (i = 0; i < itemImages.length; i++) {
  imageArray.push("<li><img src='" + itemImages[i].src + "'/></li>");
}

The image array looks like this:

["<li><img src='http://cdnmedia.marmot.com/images/product/tile/75940_9149_f.jpg'/></li>", "<li><img src='http://cdnmedia.marmot.com/images/product/tile/18840_001_f.jpg'/></li>"]

I can seem to figure out how to display these in my code. The function currently looks like this:

function displayModal(itemCount, imageArray, cartTotal) {
  $("<article id='modal'><div id='itemCount'>" + "Total Items: " 
    + itemCount + "<br><div id=itemImages>" + "<div id='images'>" + "IMAGES!" +
    "</div></div></div></article>").css({
    "width": "461px",
    "height": "263px",
    "line-height": "200px",
    "position": "fixed",
    "top": "50%",
    "left": "50%",
    "margin-top": "-155px",
    "margin-left": "-232px",
    "background-color": "rgb(255,255,255)",
    "border-radius": "5px",
    "text-align": "center",
    "z-index": 101,
    "border": "1px solid rgb(227,227,227)",
    "border-top": "4px solid rgb(217,0,31)"
  }).appendTo("#overlay");
  $("#itemCount").css({
    "position": "relative",
    "bottom": "79px",
    "font-family": "Helvetica",
    "color": "#000",
    "font-size": "16px"
  }).appendTo("#modal");
}

I'm using the place-holding IMAGES! for the actual images. I can't seem to display the images themselves, only the word "object".

bunnmatt · Accepted Answer · 2015-10-24 08:49:23Z

1

I suspect that this is because you're referencing the imageArray array - which is an object - but what you want are the elements within the array.

You can retrieve the individual items in the array in a similar way to how you first added them, e.g.

    for (i = 0; i < imageArray.length; i++) {
      var image = imageArray[i];
    }

Or you could build up a string of all your image HTML by adding the following to the beginning of your displayModal function:

    var imageHTML = "";
    for (i = 0; i < imageArray.length; i++) {
      imageHTML += imageArray[i];
    }

and adding imageHTML into your generated HTML in place of "IMAGES!"

I've added a working example to JSFiddle

edited Oct 24, 2015 at 8:49

answered Oct 23, 2015 at 8:48

bunnmatt

81712 silver badges23 bronze badges

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

6 Comments

Becca Over a year ago

I build up my a string of my image HTML. And it looks as follows: "<li><img src='cdnmedia.marmot.com/images/product/tile/75940_9149_f.jpg'/… src='cdnmedia.marmot.com/images/product/tile/18840_001_f.jpg'/…>" However, when I add this as an argument to my function, it is still returning two objects.

bunnmatt Over a year ago

Would you be able to post your complete code, or create a JSFiddle so we can see exactly what's going on?

Becca Over a year ago

Sure, here is the var function: var cartTotal = parseFloat($("#subTotal").text().match(/\d+/)); var itemCount = parseInt($("#navShoppingCart").text().match(/\d+/)); var itemImages = $(".itemImg img"); var imageHTML = ""; for (i = 0; i < itemImages.length; i++) { imageHTML += "<li><img src='" + itemImages[i].src + "'/></li>"; }

bunnmatt Over a year ago

I think I see the problem - I've updated my answer to hopefully make it clearer.

Becca Over a year ago

Now I am getting the following displayed on the screen [object HTMLImageElement][object HTMLImageElement]

|

Collectives™ on Stack Overflow

Displaying Images from a Javascript Array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related