Twitch Tv Project!


Hello guys, i am doing the twitch tv project, but can i ask you how to assign the values of the array into the api variables? Here is my code until now and what i am trying to do:


const twitchChannels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]

var api1 = "" + twitchChannels[i]
var api2 = "" + twitchChannels[i]
var api3 = "" + twitchChannels[i]

$.getJSON(api1, function(data1){
    for (i = 0; i < twitchChannels.length; i++){

})//json1 end



You misplaced your for loop. Your $.getJSON call should be inside for loop, not other way around.

You need to iterate over your twitchChannels array. So first, get rid of + twitchChannels[i] part from all of your api1, api2 and api3.

Then run a loop like

for(var i=0; i < twitchChannels.length;i++){
  $.getJSON(api1 + twitchChannels[i], function(data1){


i tried this, but it doesnt respond my calls to test it, i dont know if it sth wrong with the api or not :confused:


To save you some headaches:

  1. Use instead of for the URL domain or you will get cross origin errors.
  2. Do not use for (i = 0; i < twitchChannels.length; i++){ with asynchronous code like $.getJSON. See this article for more information:

Also, you’ll need a slash / before each twitchChannel. It would look like this:

const twitchChannels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]

twitchChannels.forEach(function(twitchChannel) {
  var api1 = "" + twitchChannel;
  var api2 = "" + twitchChannel;
  var api3 = "" + twitchChannel;

  // getJSON code goes here

If that doesn’t help you get back on the right path, share your updated code (preferably from and we can help out some more.

#5 this works in code pen but in my local project not!


now it works, ill try it this way with get json, thank u for thing


Can i ask you one more question? i want to put the icons in the side as a column under logo but im not figuring it out! can u give me a tip?


Glad that helped! It’s starting to look like a app :wink:

To put the logos on the left hand side, I think it’s easier to create the HTML by hand first. After that, you can try to create each user row on every loop of your forEach. For example, one row for the ‘freecodecamp’ channel could look like:

<div class="row text-center">
  <div class="col-xs-4" id ="freecodecamp-logo">
    <img id="freecodecamp-logo" class="img-responsive center-block channel-logo" src="">
  <div class="col-xs-4" id ="freecodecamp-channel" class="channel-info">Channel</div>
  <div class="col-xs-4" id ="freecodecamp-status" class="channel-status">Status</div>

You then append this html with the name freecodecamp replaced with the actual channel name on every loop.


Thanks, ill try to finish the project tomorrow, you have been a great help :slight_smile:


hi again, i made this for on this but want to make the icons and the descriptions to stay inline with each other and also the status check is always offline, i think the if statement is ok, can you take a look please?


This line:


Needs to change to:

if ( == null) {

Also, be sure to read that link to the stack overflow article I sent above about using for loops with asynchronous code. Do console.log(twitchChannels[i]) in your function(data3) and you’ll see they’re all undefined. I want to avoid writing more code for you here, as it won’t help :slight_smile: but that Stack Overflow article will help you figure it out.