I cannot see images from Javascript array

Question

I want to load some images from a Javascript array but the images cannot be loaded. Can someone please have a look at my code?

Thank you

var works = [
  {
    title: "First Project",
    pic: "https://www.petfinder.com/wp-content/uploads/2012/09/Blog-Kitty-Cam-solo.jpg"
  },
  {
    title: "Second Project",
    pic: "http://www.animal-photography.com/thumbs/red_tabby_long_hair_kitten_~AP-0UJFTC-TH.jpg"
  },
  {
    title: "Third Project",
    pic: "http://www.animal-photography.com/thumbs/silver_tabby_kittens~AP-0JO6Y9-TH.jpg"
  },
  {
    title: "Fourth Project",
    pic: "http://www.animal-photography.com/thumbs/silver_tabby_kitten_looking_up~AP-0DLVMB-TH.jpg"
  }
];

      //works
   for(var i = 0; i < works.length; ++i) {
        //script for array goes here
        $('#work1').append('\
          <div class="col-xs-6 col-md-6 col-md-3">\
          <a href='#' class='work-img'>\
            <img class="img-responsive" src="' + works[i].pic + '">\
            <span class='info'><p class='proj-title'>Title:</p> src="' + works[i].title + '" </span>\
          </a>\
          </div>\
          ');//append closes

You can see what's wrong by the syntax highlighting. Your quotes make it a string — Sterling Archer
– Sterling Archer, Commented Mar 25, 2016 at 20:34
You have syntax errors in your concatenation. Console will tell you the story — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Mar 25, 2016 at 20:34
Try opening your console (hit F12). Those error messages will help you a lot when you run into trouble. — Mike Cluck
– Mike Cluck, Commented Mar 25, 2016 at 20:36

Nutshell · Accepted Answer · 2016-03-25 20:40:54Z

1

I've corrected a few things in your code :

See this fiddle

JS code : //works

   for(var i = 0; i < works.length; ++i) {
        //script for array goes here

        $('#work1').append('<div class="col-xs-6 col-md-6 col-md-3">' +
         '<a href="#" class="work-img">' +
            '<img class="img-responsive" src="' + works[i].pic + '">' +
            '<span class="info"><p class="proj-title">Title:</p>' + works[i].title + '</span>' +
         '</a>' +
         '</div>'
          );//append closes
   }

The for loop wasn't closed and the concatenation of elements was wrong. Beside the title of each image wasn't print good as well.

answered Mar 25, 2016 at 20:40

Nutshell

8,5251 gold badge21 silver badges38 bronze badges

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

1 Comment

aptbs85 Over a year ago

Thank you i got it to work. Thanks everyone for your help

Collectives™ on Stack Overflow

I cannot see images from Javascript array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related