# Twitch Viewer API - For Loop RANDOMLY iterating over elements

**URL:** <https://forum.freecodecamp.org/t/twitch-viewer-api-for-loop-randomly-iterating-over-elements/84809>\
**Category:** General\
**Created:** [February 7, 2017, 4:08pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-api-for-loop-randomly-iterating-over-elements/84809 "2017-02-07T16:08:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jamesbarrett95](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jamesbarrett95/32/5238_2.png) [@jamesbarrett95](https://forum.freecodecamp.org/u/jamesbarrett95)\
**Post date:** [February 7, 2017, 4:08pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-api-for-loop-randomly-iterating-over-elements/84809/1 "2017-02-07T16:08:30Z")

</div>

Hi guys, currently working on the Twitch Viewer challenge and I seem to be having a problem with my iterations in my for loop… Not sure if it is an API problem. Anyway here is teh codez:

```auto
const channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
const streamers = document.getElementById("streamers");

for(let i = 0; i < channels.length; i++) {
  let url = "https://api.twitch.tv/kraken/channels/" + channels[i] + "?client_id=t300383ams5iuxlej34gzwk11qjepn&stream_type=all&callback=?";

  function callback(data) {
    const a = document.createElement("a");
    const li = document.createElement("li");
    const span = document.createElement("span");
    const img = document.createElement("img");

    a.setAttribute("href", data.url)
    a.setAttribute("target", "blank");
    a.appendChild(li);
    img.setAttribute("src", data.logo);
    li.appendChild(img);
    span.textContent = data.display_name;
    li.appendChild(span);
    streamers.appendChild(a);
  }

  $.getJSON(url, callback);
}

```

Output is fine…  
Example:

> **[Gyazo](https://gyazo.com/1fbc2fd4b3777e1e9acbd39118b91ceb)**
>
> ​

However whenever I refresh the page it lists them in a different order…  
Example:

> **[Gyazo](https://gyazo.com/c837018607f17c6bcd6345d2dfb44388)**
>
> ​

This is going to be problematic when I start filtering by who is online and offline… So my question is:

How can I ensure that the Twitch API loops over my hard-coded array as is?

Thanks,  
James.

---

<div class="post-metadata">

**Author:** ![AlexMcLeod01](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@AlexMcLeod01](https://forum.freecodecamp.org/u/AlexMcLeod01)\
**Post date:** [February 7, 2017, 4:14pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-api-for-loop-randomly-iterating-over-elements/84809/2 "2017-02-07T16:14:02Z")

</div>

Someone else can correct me if I’m wrong, but I think the order is determined by the order the responses are received.

---

<div class="post-metadata">

**Author:** ![marzelin](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/marzelin/32/8442_2.png) [@marzelin](https://forum.freecodecamp.org/u/marzelin)\
**Post date:** [February 7, 2017, 5:00pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-api-for-loop-randomly-iterating-over-elements/84809/3 "2017-02-07T17:00:18Z")

</div>

1. Send the next request after previous has completed
2. Defer execution for requests that are too soon
3. Chain promises
4. Use a new hotness: async function

---

<div class="post-metadata">

**Author:** ![jamesbarrett95](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jamesbarrett95/32/5238_2.png) [@jamesbarrett95](https://forum.freecodecamp.org/u/jamesbarrett95)\
**Post date:** [February 7, 2017, 5:32pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-api-for-loop-randomly-iterating-over-elements/84809/4 "2017-02-07T17:32:45Z")

</div>

I have no idea what you mean, sorry haha.

---

<div class="post-metadata">

**Author:** ![marzelin](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/marzelin/32/8442_2.png) [@marzelin](https://forum.freecodecamp.org/u/marzelin)\
**Post date:** [February 7, 2017, 5:33pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-api-for-loop-randomly-iterating-over-elements/84809/5 "2017-02-07T17:33:52Z")

</div>

```auto
const channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
const streamers = document.getElementById("streamers");
let promise = Promise.resolve()

for (let i = 0; i < channels.length; i++) {
  let url = "https://api.twitch.tv/kraken/channels/" + channels[i] + "?client_id=t300383ams5iuxlej34gzwk11qjepn&stream_type=all&callback=?";
  const p = $.getJSON(url);
  promise = promise.then(x => p).then(callback)

}

function callback(data) {
  const a = document.createElement("a");
  const li = document.createElement("li");
  const span = document.createElement("span");
  const img = document.createElement("img");

  a.setAttribute("href", data.url)
  a.setAttribute("target", "blank");
  a.appendChild(li);
  img.setAttribute("src", data.logo);
  li.appendChild(img);
  span.textContent = data.display_name;
  li.appendChild(span);
  streamers.appendChild(a);
}

```

---

<div class="post-metadata">

**Author:** ![jamesbarrett95](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jamesbarrett95/32/5238_2.png) [@jamesbarrett95](https://forum.freecodecamp.org/u/jamesbarrett95)\
**Post date:** [February 8, 2017, 5:35pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-api-for-loop-randomly-iterating-over-elements/84809/6 "2017-02-08T17:35:48Z")

</div>

Hi marzelin,

Thanks for the reply. I have taken the time out to try and understand Promises for a few hours and it still doesn’t seem to click…Perhaps it’s the whole functional approach which is throwing me off 😕

From what I have read, I am looking at a Promise like this:

- It allows for asynchronous code; meaning other things can run in the background whilst that is happening.
- Using ‘then’ allows for us to determine the order of execution

Syntactically, I’m just completely thrown off. A breakdown of what you have just done would be fantastic.

Thanks,  
James.

---

<div class="post-metadata">

**Author:** ![marzelin](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/marzelin/32/8442_2.png) [@marzelin](https://forum.freecodecamp.org/u/marzelin)\
**Post date:** [February 8, 2017, 10:57pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-api-for-loop-randomly-iterating-over-elements/84809/7 "2017-02-08T22:57:27Z")

</div>

Promises are containers for future values.  
They are abstractions over time and monads. I don’t know who invented this but it is just mindblowing.

Your conclusions about promises are correct. Keep reading, you’ll eventually get it.

Maybe this code will be easier to digest:

```auto
const channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
const streamers = document.getElementById("streamers");

// converts names to urls
const url = (name) => "https://api.twitch.tv/kraken/channels/" + name + "?client_id=t300383ams5iuxlej34gzwk11qjepn&stream_type=all&callback=?";

// an array that stores promises that store data for each channel
// [promise<ESL_SC2 data>, promise<OgamingSC2 data>, ...]
const promisedChannelsData = channels
  .map(url)
  .map( (url) => $.getJSON(url) )

Promise
  // when all request completed
  .all(promisedChannelsData) 
  // call callback on each of the channel data
  // ie callback(<ESL_SC2 data>)
  .then( (datas) => datas.map(callback) )

function callback(data) {
  const a = document.createElement("a");
  const li = document.createElement("li");
  const span = document.createElement("span");
  const img = document.createElement("img");

  a.setAttribute("href", data.url)
  a.setAttribute("target", "blank");
  a.appendChild(li);
  img.setAttribute("src", data.logo);
  li.appendChild(img);
  span.textContent = data.display_name;
  li.appendChild(span);
  streamers.appendChild(a);
}

```

---

<div class="post-metadata">

**Author:** ![jamesbarrett95](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jamesbarrett95/32/5238_2.png) [@jamesbarrett95](https://forum.freecodecamp.org/u/jamesbarrett95)\
**Post date:** [March 16, 2017, 12:07am UTC](https://forum.freecodecamp.org/t/twitch-viewer-api-for-loop-randomly-iterating-over-elements/84809/8 "2017-03-16T00:07:17Z")

</div>

Hi marzelin,

I finished the Twitch project! Thank you for your answers. I just wanted a bit of clarification on what exactly ‘x’ is doing in your first code segment that you provided:

`promise = promise.then(x => p).then(callback);`

From what I know about arrow functions, I assume `x` is the parameter? But what exactly is it? And how does it help when calling the `getJSON(url)` function?

Thanks,  
James.

---

<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 16, 2021, 2:47pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-api-for-loop-randomly-iterating-over-elements/84809/9 "2021-01-16T14:47:42Z")

</div>