Undefined when displaying Img's

JavaScript
1

I have been playing with this code for a while and I was wondering why when I try to add img’s to the array on the js code makes the images appear on DOM but also makes a bunch of Undefined elements appear, How can I just make the 15 images appear without the undefined?
CODEPEN

2

Here is part of the for loop that creates the images. I added a console.log(images[i]), so you can see what the reference to images[i] is. It is just a string url. It is not an object containing a source and alt properties as you have tried to reference (hence the undefined).

  for (var i = offset; i < offset + perPage; i++) {
    if ( images[i] ) {
      console.log(images[i])
      var template = document.createElement('div');
      var title = document.createElement('p');
      var titleText = document.createTextNode(images[i].title);
      var img = document.createElement('img');
      
      template.classList.add('template')
      img.setAttribute("src", images[i].source);
      img.setAttribute('alt', images[i].title);

You do have the following code right after the images initialization.

for (var i = 0; i < 15; i++) {
  images.push({
    title: "Image " + (i + 1),
    source: images[i]
  });
}

Not sure why you are adding additional elements (which are objects) to the end of the existing images array. If you want an array of objects, then just create an new array and push the objects to it and then iterate over it instead of the original images array.

3

Using this method works fine, I wonder if this is an efficient way to do it. Thaks
js:

var arrayOfImages = [
  "1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg",
  "11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg",
  "20.jpg","21.jpg","22.jpg","23.jpg","24.jpg","25.jpg","26.jpg","27.jpg","28.jpg","29.jpg",
  "30.jpg","31.jpg","32.jpg","33.jpg","34.jpg","35.jpg","36.jpg"
]

const images = []

for (var i = 0; i < 36; i++) {
  images.push({
    title: "Image " + (i + 1),
    source: arrayOfImages[i]
  });
}
4

If you name them like that, I would not bother with the array of objects. I would just use through the arrayOfImages intead:

const arrayOfImages = [
  "1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg",
  "11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg",
  "20.jpg","21.jpg","22.jpg","23.jpg","24.jpg","25.jpg","26.jpg","27.jpg","28.jpg","29.jpg",
  "30.jpg","31.jpg","32.jpg","33.jpg","34.jpg","35.jpg","36.jpg"
];

// later in your showImages
  for (var i = offset; i < offset + perPage; i++) {
    if ( arrayOfImages[i] ) {
      const imageSrc = arrayOfImages[i];
      const imageTitle = 'Image ' + imageSrc.replace('.jpg', '');
      const template = document.createElement('div');
      const title = document.createElement('p');
      const titleText = document.createTextNode(imageTitle);
      const img = document.createElement('img');
      
      template.classList.add('template')
      img.setAttribute("src", imageSrc);
      img.setAttribute('alt', imageTitle);

      title.appendChild(titleText);
      template.appendChild(img);
      template.appendChild(title);
      gallery.appendChild(template);      
    }
  }

However, there is not much point in an alt value of “Image 1” as it provides no context of what the image shows visually.

I personally would build the HTML of each div as a string and then append it to the main element.

const arrayOfImages = [
  "1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg",
  "11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg",
  "20.jpg","21.jpg","22.jpg","23.jpg","24.jpg","25.jpg","26.jpg","27.jpg","28.jpg","29.jpg",
  "30.jpg","31.jpg","32.jpg","33.jpg","34.jpg","35.jpg","36.jpg"
];

// later in your showImages
  for (var i = offset; i < offset + perPage; i++) {
    const imageSrc = arrayOfImages[i];
    const imageTitle = 'Image ' + imageSrc.replace('.jpg', '');
    const template = `
      <div class="template">
        <img src="${imageSrc}" alt="${imageTitle}">
        <p>${imageTitle}</p>
      </div>
   `;
  }
  gallery.innerHTML += templateHTML;