Question

Let’s say I have a set of 10 objects, and one of those objects requires additional information pulled from an API, called via Javascript. In my case, this object is a Soundcloud embed, and I need additional information from their API.

With jQuery, I can use $.getJSON and push the resolved value into a global array, but that doesn’t appear to guarantee that it is placed in the right order without a lot of splicing code.

What is the best practice for keeping my list in order?

Example:

var embeds = [{type: "mp3", url: "http://example.com/song.mp3", artist: "Artist"},
              {type: "mp3", url: "http://anotherexample.com/song.mp3", artist: "Artist 2"},
              {type: "soundcloud", url: "http://soundcloud.com/summergirlfriends/shockwaves"}];
for(e in embeds) {
    if(embeds[e].type == "soundcloud") {
        // here is where i need to call the SC API and do something with the results
    }
}

Answer 1

If i understood you correctly i think what you’re looking for is a closure to make sure that you’re modifying the correct embed:

var embeds = [{type: "mp3", url: "http://example.com/song.mp3", artist: "Artist"},
              {type: "mp3", url: "http://anotherexample.com/song.mp3", artist: "Artist 2"},
              {type: "soundcloud", url: "http://soundcloud.com/summergirlfriends/shockwaves"}];
for(var i=0;i<embeds.length;i++) {
    if(embeds[i].type == "soundcloud") {
        (function(embed){
            $.ajax({
               //...
               success:function(newData){
                   embed['additionalData']=newData;
                   console.log(embeds);
               }
            }); 
        })(embeds[i])
    }
}