how to display images in a javascript Array

Question

Im trying to display the images in an array onto the page but having difficulties

heres the js

     var movieArray = [
      { title: "The Artist", picture: "http://cmclove.org/img/sw_off_off.png" },
      { title: "A Better Life", picture: "http://cmclove.org/img/sw_off_off.png" },
      { title: "Abduction", picture: "http://cmclove.org/img/sw_off_off.png" },
      { title: "African Cats", picture: "http://cmclove.org/img/sw_off_off.png" },
      { title: "Angel Crest", picture: "http://cmclove.org/img/sw_off_off.png" },
      { title: "Arthur", picture: "http://cmclove.org/img/sw_off_off.png" },
      { title: "Anonymous", picture: "http://cmclove.org/img/sw_off_off.png" },
      { title: "A Dangerous Method", picture: "http://cmclove.org/img/sw_off_off.png" },
      ];

      for (var p in movieArray) {
      console.log(p+ ':' +movieArray[p].title+ '|' +movieArray[p].picture);
      }

heres a link to the fiddle

http://jsfiddle.net/d0okie0612/YTKHh/

Your question and your fiddle don't have any logic to actually try to display the images in HTML, so I am not sure what you are asking. — Mike Brant
– Mike Brant, Commented Mar 26, 2013 at 18:32

techfoobar · Accepted Answer · 2013-03-26 18:32:43Z

4

You are not inserting anything into the page.

A solution would be:

for (var p = 0; p < movieArray.length; p++) {
    $('body').append('<img src="'+movieArray[p].picture+'" title="'+movieArray[p].title+'">');
}

Demo: http://jsfiddle.net/YTKHh/2/

answered Mar 26, 2013 at 18:32

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

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

5 Comments

user1502223 Over a year ago

thats working! But is it possible to control each image by adding its own individual class and styles and stuff?

techfoobar Over a year ago

Yes, you can add the class, styles etc. to the initial array and use those inside the loop above as class and style attributes.

John Dvorak Over a year ago

@user1502223 certainly it is. It depends on what you want.

user1502223 Over a year ago

i need the class names of each image to be different though....so first image will have class="1" second image will have class='2' etc...how would i do that?

techfoobar Over a year ago

That would be $('body').append('<img src="'+movieArray[p].picture+'" title="'+movieArray[p].title+'" class="'+(p+1)+'">');

Collectives™ on Stack Overflow

how to display images in a javascript Array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related