What is wrong with my array indexing?

1

I am doing the twitch streamer project and trying to get my offline streamers to show under the offline tab. So far I have my online streamers showing but not the offline ones. I think the problem has something to do with my array.

Here’s a link to my pen. Thanks in advance. https://codepen.io/apoc8188/pen/vxvByv

<div id="offline" class="tabcontent">
  <h3>Offline</h3>
</div>

function getTwitch() {

  var arr1 = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

  for (i=0;i<arr1.length; i++) {
$.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + arr1[i] + "?callback=?", function(data) {
  console.log(data);
  var channelName = data.stream.channel.name; 
  if (data.stream == null) {
    $("#offline").append("<div><a href='" +data._links.self + "'>" + arr1[i] + "</a></div>"+ "<br>");
    $("#all").append("<div><a href='" +data._links.channel + "'>" + channelName + "</a></div>" + "<br>");
  } else if (data.stream != null) {
    $("#online").append("<div ><a class ='streamers' href='" +data._links.channel + "'>" + channelName + "</a></div>" + "<br>");
    $("#all").prepend("<div><a href='" +data._links.channel + "'>" + channelName + "</a></div>" + "<br>");
  }

});
  }
}

Here is the response from the api for offline channels:

{
  "stream": null,
  "_links": {
    "self": "https://api.twitch.tv/kraken/streams/test_channel",
    "channel": "https://api.twitch.tv/kraken/channels/test_channel"
  }
}
2

Putting in some console.log statements, I’ve found one problem - you reference data.stream,channel.name without seeing if it exists. Looking at the output, I see that for your offline people, data.stream is undefined, so data.stream.channel.name doesn’t exist.