Cannot iterate using for-in javascript

Question

I am trying to display images into thumbnails for my image gallery by using for...in loop but it is only able to display one image. I am still a beginner in javascript, so my understanding of for loops is still not good. Where did I go wrong?

sample array:

["http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
 "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png"]

for...in loop:

for(var thumb in thumbnails) {
    $('.thumbnail img').attr({"src":[thumbnails[thumb]]});
}

thumb is already the value, $('.thumbnail img').attr({"src":thumb}); — Tushar
– Tushar, Commented Dec 8, 2015 at 4:18
@Tushar: No, thumb is the key: 0, then 1. You need ES6 for (var thumb of thumbnail) for what you are saying. OP, src should not be an array: attr({"src": thumbnails[thumb] }). Also, you're setting all the thumbnail images to one value, then another, which is probably not what you want (then again, your whole array has the same value...) — Amadan
– Amadan, Commented Dec 8, 2015 at 4:22
@Tushar it doesnt work i get a 404 error, isn't thumb the key? — zana
– zana, Commented Dec 8, 2015 at 4:22
for-in should only be used for iterating over the keys and values of an object. Use a standard for loop or Array.prototype.forEach if you can use ES6. — wrshawn
– wrshawn, Commented Dec 8, 2015 at 4:29

Ishamael · Accepted Answer · 2015-12-08 04:23:08Z

2

Actually, your loop is perfectly fine. You do iterate over all the URLs in your array, but for each URL you set it as src for the same thumbnail img, effectively overwriting it each time.

It is hard to help you fix it, because I don't know your exact layout and requirements, but you effectively either need to create a set of imgs for thumbnails (as opposed to just one img, which seems to be the case now), and set their srcs in order, or create brand new img each time and append it to some parent container, like so:

for(var thumb in thumbnails) {
    $(<some container>).append($('<img>').attr({"src":[thumbnails[thumb]]}));
}

answered Dec 8, 2015 at 4:23

Ishamael

12.8k4 gold badges38 silver badges53 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:23:12Z

2

You shouldn't use for .. in for iterating through arrays. Why?
Use Array.prototype.forEach instead.

Also, if you want to create an element using jQuery, then use another syntax:

thumbnails.forEach(function(thumb) {
    $("<img/>").attr('src', thumb).appendTo(container);
});

Working example:

var thumbnails = [
'https://blog.stackoverflow.com/images/wordpress/stackoverflow-logo-alt2-300.png', 
'http://letscode.ghost.io/content/images/2015/09/stackoverflow.png',
'https://i.sstatic.net/kq8EX.png'];

thumbnails.forEach(function(thumb) {
  $("<img/>").attr('src', thumb).appendTo('body');
});

img {
  height: 100px;
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Dec 8, 2015 at 4:27

Yeldar Kurmangaliyev

34.3k13 gold badges64 silver badges104 bronze badges

Collectives™ on Stack Overflow

Cannot iterate using for-in javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related