API calls not working after clicking on the desired buttons for TwitchTv

1

The content loads when the pen is run(when the document loads) but not when click the off line or the on line buttons.
Here is the HTML:
LInk to the pen:

See the Pen Twitch Channels by RAHUL TIWARI (@invinciblycool) on CodePen.

Here is the HTML:

<body>
  <div class="container container-fluid">
    <div class="container" style="color:red;">
      <div class="container container-fluid" id="results" style="background-color:gray;">
        <div class="row">
          <div class="col-xs-4 col-md-4"><button class="btn btn-primary" id="allchannels">ALL</button></div>
          <div class="col-xs-4 col-md-4"><button class="btn btn-danger " id="offlinechannels">OFFLINE</button></div>
          <div class="col-xs-4 col-md-4"><button class="btn btn-success" id="onlinechannels">ONLINE</button></div>
          <div class="container-fluid" id="offlineresults">
          </div>
          <div class="container-fluid" id="onlineresults" style="color:green">
        </div>
      </div>
    </div> 
  </div>
</body>

Here is the JS

var channels = [
  "ESL_SC2",
  "OgamingSC2",
  "cretetion",
  "freecodecamp",
  "storbeck",
  "habathcx",
  "RobotCaleb",
  "noobs2ninjas"
];
function formatData(d,i){
 document.getElementById("results").innerHTML+='<div class="well well-sm">'+channels[i]+'<a href="'+d._links.channel+'"></a>'+'</div>';
}
function formatData_offline(d,i){
  if(d.stream==null){  document.getElementById("offlineresults").innerHTML+='<div class="well well-sm">'+channels[i]+'<a href="'+d._links.channel+'"> Offline</a>'+'</div>';
  }
}
function formatData_online(d,i){
  if(d.stream!=null){
    document.getElementById("onlineresults").innerHTML+='<div class="well well-sm">'+channels[i]+'<a href="'+d._links.channel+'"></a>'+'</div>';
  }
}
$(document).ready(function(data){
  var c=0;
  for (var i = 0; i < channels.length; i++) {
    $.ajax({
      url:
        "https://wind-bow.gomix.me/twitch-api/streams/" +
          channels[i] +
          "?callback=?",
      type: "GET",
      dataType: "json",
      success: function(data) {
        console.log(data);
        formatData(data,c);
        c+=1;
        }
    });
  } 
});
$("#allchannels").click(function(data) {
  var c=0;
  for (var i = 0; i < channels.length; i++) {
    $.ajax({
      url:
        "https://wind-bow.gomix.me/twitch-api/streams/" +
          channels[i] +
          "?callback=?",
      type: "GET",
      dataType: "json",
      success: function(data) {
        console.log(data);
        formatData(data,c);
        c+=1;
        }
    });
  }
});
$("#offlinechannels").click(function(data) {
  var c=0;
  for (var i = 0; i < channels.length; i++) {
    $.ajax({
      url:
        "https://wind-bow.gomix.me/twitch-api/streams/" +
          channels[i] +
          "?callback=?",
      type: "GET",
      dataType: "json",
      success: function(data) {
        console.log(data);
        formatData_offline(data,c);
        c+=1;
        }
    });
  }
});
$(".btn-success").click(function(data) {
  var c=0;
  for (var i = 0; i < channels.length; i++) {
    $.ajax({
      url:
        "https://wind-bow.gomix.me/twitch-api/streams/" +
          channels[i] +
          "?callback=?",
      type: "GET",
      dataType: "json",
      success: function(data) {
        console.log(data);
        formatData_online(data,c);
        c+=1;
        }
    });
  }
});

Also I realize that I have violated the DRY(Do not Repeat Yourself) principle, is there a better way to avoid the above stated.

2

Ok tried a couple of things … in your $(document).ready(function etc i commented out your loading call … wanted to see whats going on … and your online and all calls worked then … the reason your offline call dosent work is the closing tag for the allchannels call is after the offline code … so basically your offline click function is sitting inside your allchannels function … so when i brought your closing bracket back up to before your offline click function it then worked.
will look at why they dont run when i dont comment out initial code at page load
also save code rept do
var myUrl = "https://wind-bow.gomix.me/twitch-api/streams/" +channels[i] + "?callback=?" $.ajax({ url:myUrl, etc etc

3

Yes when I comment the ready function everything seems to work just fine.
Still trying to figure out a solution.