Making data from multiple JSON calls line up correctly

Hey all. Edited for more clarity. I’m currently working on my twitch api project. I currently have my page set up as three columns/lists: one for the streamer logo, one for the streamer name, and one to show their status, whether streaming or offline.

The problem is, I have to do two API calls to get all the information I need: one for the logo and name, and one for the streaming status. When I get the logo and name info into my lists, they show up in a random order, so the online/offline info from my second api call doesn’t always line up with the corresponding streamer. Does anyone have any tips on how I can clear this up?

Here’s a link to my pen.

Any help at all is much appreciated, thank you!

try the foreach method - instead of a for loop https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

This is exactly what you need to do. It can get complicated, and some of the more exciting features coming to future versions of JavaScript are meant to handle this very problem. The best current solution is to use promises. This will take a little time to learn, but since promises are everywhere in JS today, it would be better to learn them as soon as possible. You can get a great crash course from MPJ that is directly applicable to what you are doing in your project.

He does this all in native JS, but jQuery has the same API. Instead of using callbacks, you can use then and catch, just like native promises. It also has a method, $.when, that is almost identical to the Promise.all used in the video. The only difference is that Promise.all takes an array of promises, which $.when just takes each promise as an argument.

Promise.all([promise1, promise2, promise3])
    .then(function(data) {
        // do stuff
    });

$.when(promise1, promise2, promise3)
    .then(function(data) {
        // do stuff
    });