# Making data from multiple JSON calls line up correctly

**URL:** <https://forum.freecodecamp.org/t/making-data-from-multiple-json-calls-line-up-correctly/170086>\
**Category:** General\
**Created:** [January 21, 2018, 5:46pm UTC](https://forum.freecodecamp.org/t/making-data-from-multiple-json-calls-line-up-correctly/170086 "2018-01-21T17:46:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![KayDeeJay](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kaydeejay/32/71491_2.png) [@KayDeeJay](https://forum.freecodecamp.org/u/KayDeeJay)\
**Post date:** [January 21, 2018, 5:46pm UTC](https://forum.freecodecamp.org/t/making-data-from-multiple-json-calls-line-up-correctly/170086/1 "2018-01-21T17:46:37Z")

</div>

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.](https://codepen.io/kaydeejay/pen/qpgdqM)  
  
Any help at all is much appreciated, thank you!

---

<div class="post-metadata">

**Author:** ![moT01](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mot01/32/417588_2.png) [@moT01](https://forum.freecodecamp.org/u/moT01)\
**Post date:** [January 21, 2018, 7:29pm UTC](https://forum.freecodecamp.org/t/making-data-from-multiple-json-calls-line-up-correctly/170086/2 "2018-01-21T19:29:09Z")

</div>

try the foreach method - instead of a for loop [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Array/forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [January 21, 2018, 7:29pm UTC](https://forum.freecodecamp.org/t/making-data-from-multiple-json-calls-line-up-correctly/170086/3 "2018-01-21T19:29:11Z")

</div>

> [@KayDeeJay](#):
>
> I thought maybe I could try nesting the second JSON call within the first

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.

[![](https://img.youtube.com/vi/2d7s3spWAzo/hqdefault.jpg "Promises - Part 8 of Functional Programming in JavaScript") ](https://www.youtube.com/watch?v=2d7s3spWAzo)

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](https://api.jquery.com/jquery.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.

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

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

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:29pm UTC](https://forum.freecodecamp.org/t/making-data-from-multiple-json-calls-line-up-correctly/170086/4 "2021-01-17T20:29:45Z")

</div>