CODEWITHSUNDEEP
javascriptjqueryarrays
JQBolo
JQBolo

Reputation: 41

Jquery $.each loop dealing with array

I'm working with an array of URLs inside an object in jquery and I'm at the point where I'm super close to being finished, however I'm having a small issue.

I've bound the following loop to a click function, when the user clicks on a photo (at [location]) a bunch of corresponding photos SHOULD load below, these photos are stored in an array and I can successfully access the array inside the correct objects, but instead of inserting the URLS sequentially it inserts EVERY URL into each photo seperated by commas.

i.e instead of: img src="[0]", img src="[1]", img src="[2]"...

I am presented with: img src="[0],[1],[2]"... 

$.each(albums[location].photos, function(index, val){
  $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail" style="display:inline-block; padding: 0 25px;"><img src='+albums[location].photos+' id="coverPhoto" height="320" width="320"><figcaption>'+location+'</figcaption></a></div>');
});

I'm thinking I could solve it using another loop, but that seems clunky due to using $.each.

Any help would be greatly appreciated

Upvotes: 0

Views: 61

Answers (4)

Turi S.
Turi S.

Reputation: 331

I believe you would want to replace <img src='+albums[location].photos+'... with <img src='+val+'...

I would also add that it looks like you are reusing IDs in your repeated elements, which is almost sure to create problems down the road, for instance if you wanted to run your image-replacing twice in the same page. It is also in violation of the HTML spec.

Upvotes: 0

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

Problem: You are assigning the entire array itself as source rather than a specific one at an index. <img src='+albums[location].photos+'

Solution: Use the val variable returned by the callback function. This val points to specific item at an index and increments to point to next item on each iteration .

<img src='+val+'

Upvotes: 0

Jazzzzzz
Jazzzzzz

Reputation: 1633

Prepend main container once and close it when you are about to complete the loop, here is more clear code

$.each(albums[location].photos, function(index, val){
    if (index == 0) {
       $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail" style="display:inline-block; padding: 0 25px;">');
    }

    $('#'+cover_id+'').append('<img src='+albums[location].photos[index]+' id="coverPhoto" height="320" width="320">');

    if (albums[location].photos.length >= (index - 1)) {         
       $('#'+cover_id+'').append('<figcaption>'+location+'</figcaption></a></div>');
    }
});

Upvotes: 1

ainasiart
ainasiart

Reputation: 382

you have to use the parameters of the $.each

you have 2 ways, use the index or the value

 $.each(albums[location].photos, function(index, val){   $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail"
 style="display:inline-block; padding: 0 25px;"><img
 src='+albums[location].photos[index]+' id="coverPhoto" height="320"
 width="320"><figcaption>'+location+'</figcaption></a></div>'); });

or 

$.each(albums[location].photos, function(index, val){   $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail"
style="display:inline-block; padding: 0 25px;"><img
src='+val+' id="coverPhoto" height="320"
width="320"><figcaption>'+location+'</figcaption></a></div>'); });

Upvotes: 1

Related Questions