I have no idea how to fix this code

Question

I literally am lost with this project, I basically want to make a page that shows the status of twitch channels. Here is the codepen link.

Problem is the loop seems to finish before the else statement even completes, so it just shows 1 channel info everytime. Its just screwed up all around.

I just want to display some info for every twitch channel i have inside my channels array.

$(document).ready(function(){
  function gatherChannels(){
    var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    
    
    for(var i=0;i<channels.length;i++){
      currentChannel = channels[i];
     (function(someVar){ //<-- and u will get it here
       currentChannel = channels[someVar]; // all ur code
     
     })(i);//< -- here u pass ur loop i value
      
      
      $.getJSON("https://api.twitch.tv/kraken/streams/" + channels[i] + "?callback=?", function(data){
        
        if (data.stream !== null){
        $(".main-area").append("<div class ='channels' id='currentChannel'>" + data.stream.channel.status + "</div>");
        }
        
        else{
        $.getJSON("https://api.twitch.tv/kraken/channels/" + currentChannel + "?callback=?", function(info){
           $(".main-area").append("<div class ='channels' id='currentChannel'>" + info.url + "</div>");
        });
        }
      });
    }
  }
        
  
                     
    
  gatherChannels();
});

I was hoping for the currentChannel variable to be a more global value, someone said use a IIFE to let my 2nd getJSON which was nested inside a getJSON use it. — Symbol, Sep 03 '16 at 04:04

MugiwaraUK · Accepted Answer · 2016-09-03T04:38:30.163

Your currentChannel variable is being set in a loop which is being modified by your loop, by the time your first ajax request has been returned the loop has already ended which is why your info.url is the last one.

you could put your ajax call into its own function as shown below.

$(document).ready(function() {
  function gatherChannels() {
    var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"],
      getChannel = function getChannel(channel) {
        $.getJSON("https://api.twitch.tv/kraken/streams/" + channel + "?callback=?", function(data) {
          if (data.stream !== null) {
            $(".main-area").append("<div class ='channels' id='currentChannel" + channel + "'>" + data.stream.channel.status + "</div>");
          } else {
            $.getJSON("https://api.twitch.tv/kraken/channels/" + channel + "?callback=?", function(info) {
              $(".main-area").append("<div class ='channels' id='currentChannel'" + channel + ">" + info.url + "</div>");
            });
          }
        });
      }

    for (var i = 0; i < channels.length; i++) {
      getChannel(channels[i]);
    }
  }

  gatherChannels();
});

body {
  background-color: black;
  color: #fff;
}
h1 {
  text-align: center;
  background-color: gray;
  padding: 20px;
}
.main-area {
  margin-left: auto;
  margin-right: auto;
}
.channels {
  background: blue;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  color: white;
}

<html>

<head>
  <title>Twitch Streamer Status</title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="main-area">
      <h1>Twitch Streamers</h1>
    </div>
  </div>
</body>

</html>

That will create multiple divs with an id of "currentChannel". That is a very nice answer though. — larz, Sep 03 '16 at 04:32
Dude thank you so much, you have no idea how happy I am right now, this is the perfect answer. The code works as intended now. I changed "currentChannel" to just channel, so each div has its own ID, depending on channel name which I get from the array. Thank you SO MUCH! I literally spent all day trying to set this project up and deal with this issue, thank you again for helping me get past this issue. — Symbol, Sep 03 '16 at 04:50

I have no idea how to fix this code

1 Answers1