Creating new HTML images using a For loop through an array of image URLs
up vote
0
down vote
favorite
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>
arrays ajax loops dom
asked Nov 10 at 0:40
Aly Swerdlova
203
add a comment |
up vote
0
down vote
favorite
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>
arrays ajax loops dom
asked Nov 10 at 0:40
Aly Swerdlova
203
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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>
arrays ajax loops dom
asked Nov 10 at 0:40
Aly Swerdlova
203
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>
arrays ajax loops dom
arrays ajax loops dom
asked Nov 10 at 0:40
Aly Swerdlova
203
asked Nov 10 at 0:40
Aly Swerdlova
203
asked Nov 10 at 0:40
Aly Swerdlova
203
asked Nov 10 at 0:40
Aly Swerdlova
203
asked Nov 10 at 0:40
Aly Swerdlova
203
203
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
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 at 0:49
eag845
1698
add a comment |
up vote
1
down vote
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)
answered Nov 13 at 9:12
vsync
44.6k35154217
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
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 at 0:49
eag845
1698
add a comment |
up vote
1
down vote
accepted
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 at 0:49
eag845
1698
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
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 at 0:49
eag845
1698
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 at 0:49
eag845
1698
answered Nov 10 at 0:49
eag845
1698
answered Nov 10 at 0:49
eag845
1698
answered Nov 10 at 0:49
eag845
1698
1698
add a comment |
add a comment |
up vote
1
down vote
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)
answered Nov 13 at 9:12
vsync
44.6k35154217
add a comment |
up vote
1
down vote
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)
answered Nov 13 at 9:12
vsync
44.6k35154217
add a comment |
up vote
1
down vote
up vote
1
down vote
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)
answered Nov 13 at 9:12
vsync
44.6k35154217
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)
// 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);// 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);answered Nov 13 at 9:12
vsync
44.6k35154217
answered Nov 13 at 9:12
vsync
44.6k35154217
answered Nov 13 at 9:12
vsync
44.6k35154217
answered Nov 13 at 9:12
vsync
44.6k35154217
44.6k35154217
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53235002%2fcreating-new-html-images-using-a-for-loop-through-an-array-of-image-urls%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
