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/

Answer 1

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/