Creating new HTML images using a For loop through an array of image URLs

Question

I have an array of 40 different image URLs being returned from an AJAX request. I'm trying to create a new HTML image element for each URL in the array using a For loop, as seen in the below code. For some reason, it's only displaying the image at the first URL and that's it. Any idea why the other 39 aren't showing up?

$(document).ready(function() {
  $.ajax({
    type: 'GET',
    dataType: 'json',
    url: 'https://****/images',
    success: function(data) {
      console.log(data);
      let container = document.getElementById('feed');
      let image = document.createElement("img");
      for (let i = 0; i < data.length; i++) {
        image.setAttribute('src', data[i]);
        container.appendChild(image);
      }
    }
  });
});


<body>

  <div id="feed">
  </div>

</body>

eag845 · Accepted Answer · 2018-11-10 00:49:49Z

1

Try to create the element inside the loop.

  for (let i = 0; i < data.length; i++) {
     let image = document.createElement("img");
     image.setAttribute('src', data[i]);
     container.appendChild(image);
  }

answered Nov 10, 2018 at 0:49

eag845

1,0131 gold badge12 silver badges16 bronze badges

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

Comments

vsync · Accepted Answer · 2018-11-13 09:12:34Z

The way to create images is with new Image() and when appending multiple nodes to the DOM at once, it's better to first append the image nodes into a document fragment, and only when all the images have been appended to the fragment, then append the fragment itself into the Document (prevents redundant repaints)

// dummy data
const data = ['http://placekitten.com/100/100',
              'http://placekitten.com/100/150',
              'http://placekitten.com/100/180',
              'http://placekitten.com/100/200']

// create a dumpster-node for the images to reside in 
const fragment = document.createDocumentFragment();
 
// iterate the data and create <img> elements
data.forEach(url => {
     let image = new Image()
     image.src = url;
     fragment.appendChild(image);
})

// dump the fragment into the DOM all the once (FTW)
document.body.appendChild(fragment);

I've used Array forEach iterator in my example, because it's easier in my opinion, but you can use a for loop (or for..of loop)

Collectives™ on Stack Overflow

Creating new HTML images using a For loop through an array of image URLs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related