Why is Twitchtv API Stream only display “offline” for each channel?

This is a FreeCodeCamp project in which I am supposed to show whether or not a channel is live. However, in the list of the channels I've created, there are some channels that are live and some channels that doesn't exist. Still, no matter what, when I tried it test it out in my codepen, it's still displaying "Offline", even through some should be displaying "The Account doesn't exist" or "Online". I still couldn't figured it out. I did test the url to make sure it's working and it's working. Here's one example: "https://api.twitch.tv/kraken/streams/OgamingSC2?client_id=egn4k1eja0yterrcuu411n5e329rd3".

Here's my JS code:

$(document).ready(function() {

  getSteams();

});

var channels = ["BasicallyIDoWrk", "FreeCodeCamp", "Golgothus", "maatukka", "Vinesauce", "brunofin", "comster404", "OgamingSC2"];

  var cb = "?client_id=egn4k1eja0yterrcuu411n5e329rd3";

function getSteams() {

  for (var channel in channels) {
    var indchannel = channel;

  $.ajax({
      url: "https://api.twitch.tv/kraken/streams/" + indchannel + cb,
      type: 'GET',
      dataType: "jsonp",
      data: {
        //action: 'query',
        format: 'json',
      },
    success: function(data) {

      var game;
      var status;

      if(data.stream === null) {
        game = "Offline";
        status = "offline";
      } else if (data.stream === undefined) {
        game = "The Account doesn't exist";
        status = "Account is closed";
      } else {
        game = data.stream.game;
        status = "online";
      };

       $("#channels").append('<div class="indbox"><a target="_blank" href="#">'+ game +'</a></div>');
    }

  });
  }
}

Here's my codepen in action: https://codepen.io/kikibres/pen/EWooLK. I know that it's not completed. I will finish the rest once I make sure the api is displaying the data correctly.

$(document).ready(function() {
  
  getSteams();
  
});

var channels = ["BasicallyIDoWrk", "FreeCodeCamp", "Golgothus", "maatukka", "Vinesauce", "brunofin", "comster404", "OgamingSC2"];

  var cb = "?client_id=egn4k1eja0yterrcuu411n5e329rd3";

function getSteams() {
  
  for (var channel in channels) {
    var indchannel = channel;
  
  
  $.ajax({
      url: "https://api.twitch.tv/kraken/streams/" + indchannel + cb,
      type: 'GET',
      dataType: "jsonp",
      data: {
        //action: 'query',
        format: 'json',
      },
    success: function(data) {
    
      var game;
      var status;
      
      if(data.stream === null) {
        game = "Offline";
        status = "offline";
      } else if (data.stream === undefined) {
        game = "The Account doesn't exist";
        status = "Account is closed";
      } else {
        game = data.stream.game;
        status = "online";
      };
      
       $("#channels").append('<div class="indbox"><a target="_blank" href="#">'+ game +'</a></div>');
    }
  
  
  });
  }
}

html, body{
  height:100%;
  margin: 0;
  background-color: #ffffff;
}
.wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  display:block;
}
.container {
  width: 75%;
  margin: 30px auto 0;
  position: relative;
}
.logobox img {
  width: 20%;
  margin: 0 auto;
}
.con-button {
  background-color: white;
	border: none;
	margin: 0.5em 0 0 0;
	padding: 0.5em 1em 0.5em 1em;
  text-align: center;
	color: rgb(100,65,164);
  font-size: 20px;
}
.activate {
  border-bottom: 1px solid #6441A4;
}
.divider hr {
  border-top: 1px solid #6441A4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="twitchtvarea">
      <div class="logobox">
        <img src="https://s6.postimg.org/bay7stotd/Twitch_Purple_RGB.png" />
      </div>
      <div class="twitchbox">
        <div class="controls">
          <button id="c-all" class="con-button" type="button">All</button>
				<button id="c-online" class="con-button" type="button">Online</button>
				<button id="c-offline" class="con-button" type="button">Offline</button>	
        </div>
        <div class="divider"><hr></div>
        <div id="channels">
        </div>
      </div>
    </div>
  </div>
</div>

Solution

Part of the problem is your for loop. Javascript for in loops are used for iterating keys in an object. In the case of an array, the key is the index, meaning the following...

for (var channel in channels) {

Will set channel to:

0
1
2
...

Which will result in your URL looking like:

https://api.twitch.tv/kraken/streams/0

What I assume you want is the channel name from the channels array, so that your URL will look like:

https://api.twitch.tv/kraken/streams/SomeChannelName

You can fix your for loop one of two ways. The first is the more traditional for loop:

for (int i = 0; i > channels.length; i++) {
    var indchannel = channels[i];

    // perform your ajax calls here...
}

Or you could use the a Array.forEach() method, which calls a function for each item in an array.

channels.forEach(function(indchannel, index, arr) {
    // perform your ajax calls here...
});