Display 30 Instagram Images of a specific tag of a specific user ID

Question

I have an Instagram API call that requests images tagged with CrookedSpaces when these images return. I filter the data, making sure that only images from a specific user (using their user ID), the code should:

$(function() { $.ajax({ type: "GET", dataType: "jsonp", cache: false, url: "https://api.instagram.com/v1/tags/crookedspaces/media/recent/?count=100&access_token=TOKEN", success: function(data) { for (var i = 0; i < 31; i++) { var igUID = data.data[i].user.id; if(igUID === "USER ID") { $(".instagram").append("\ <div class='instagram-feed'>\ <img class='instagram-image' src='" + data.data[i].images.standard_resolution.url +"' width='325px' alt='" + data.data[i].user.id + " " + igUID + "' onMouseOver=\"toggle_visibility('igImageHover" + i + "');\"/>\ <div class='igHover' id='igImageHover" + i + "' onMouseOut=\"toggle_visibility('igImageHover" + i + "');\">\ <div class='igHover2'>\ SMALL TEST!\ </div />\ </div>\ </div>\ "); } else { console.log("Else portion of code ran " + elseCount + " time(s)."); ++elseCount; } } } }); }); 

However, I can only display 27 images because there are 4 images not sent by this specific user ID. Is there a way to make the for loop not increment? Or subtract 1 from me without sending the code into an infinite loop?

Here is the JSFiddle - http://jsfiddle.net/UQcZP/

Answer 1

You can use the while loop:

 var i = 0; var used=0; while (used<31) { if (i < data.data.length){ // .. Do your work here // only increment used when you actually get a match } else { // Here we are past the end of the data and did not reach the 30 items, // so just set the number of items to 31 to exit the loop. used = 31; } i++; }​