Using the Twitch API to display offline/online streamers

I've been trying to get this project to work for several days now and no matter how many tutorials I follow or examples I look at, I always end up insanely stuck with code that doesn't work.

I'm using the Twitch API to display all, online, and offline streamers. I started following the code here (his finished project) and apply it to my project...but I'm stuck again. I feel extremely confused.

Here is the JSFiddle, and here is the JS (it's a mess, I know!):

window.onload = function() {
    var streamers = ['freecodecamp', 'syndicate', 'riotgames', 'esl csgo', 'Nightblue3', 'summit1g', 'LIRIK', 'PhantomL0rd', 'imaqtpie', 'captainsparklez', 'sodapoppin', 'goldglove', 'tsm bjergsen', 'Joshdog', 'Tsm dyrus', 'mushisgoshu', 'trick2g', 'comster404', 'brunofin'];
    var status, url, picture, x = 0;

    function updateHTML(section) {
        $(section).append('<div class="row"><div class="image-holder" id="user-image-' + x + '"></div></div><div class="two-thirds column"><span class="status-message">' + status + '</span></div></div></div>');
        if (section == ".online" || section == ".offline") {
            $("#user-image-" + x).css({
                background: picture,
                'background-size': '55px'
            });
        }
        x++;
    }
    
        function showOnline () { //Show only online users
        $(".offline-users, .all-users").removeClass('focus');
        $(".online-users").addClass('focus');
        $(".offline, .unavailable").addClass('hidden');
        $(".online").removeClass('hidden');
    }

    function showOffline () { //Show only offline users
        $(".online-users, .all-users").removeClass('focus');
        $(".offline-users").addClass('focus');
        $(".offline, .unavailable").removeClass('hidden');
        $(".online").addClass('hidden');
    }

    function showAll () { //Show all users
        $(".offline-users, .online-users").removeClass('focus');
        $(".all-users").addClass('focus');
        $(".online, .offline, .unavailable").removeClass('hidden'); 
    }



    //fetch the data for each streamer using ajax requests
    for (var i = 0; i < streamers.length; i++) {
        ajax();
    }

    function ajax() {
        $.ajax({
            url: "https://api.twitch.tv/kraken/streams/" + streamers[i] + "?callback=?",
            dataType: "jsonp",
            data: {
                format: "json"
            },

            success: function(data) {
                fetchData(data);
            },

            error: function() {
                console.log("unable to access json");
            }
        })
    }

    function fetchData(data) {
        if (data.stream === null) {
            url = data._links.channel.substr(38);
            updateOfflineUsers();
        } else if (data.status == 422 || data.status == 404) {
            status = data.message;
            updateHTML(".unavailable");
        } else {
            if (data.stream.channel.logo !== null) {
                picture = 'url("' + data.stream.channel.logo + '")';
            } else {
                picture = 'url("http://seeklogo.com/images/T/twitch-logo-4931D91F85-seeklogo.com.png")';
            }
            url = data._links.channel.substr(38);
            status = "<a href='https://twitch.tv/" + url + "' target='_blank'" + "'>" + data.stream.channel.display_name + "</a>" + " is currently streaming" + data.stream.game;
            updateHTML(".online");
        }
    }

    //another API call for more info on the offline users
    function updateOfflineUsers() {
        $.ajax({
            url: "https://api.twitch.tv/kraken/channels/" + url,
            dataType: "jsonp",
            data: {format: "json"},
            success: function(json) {
                status = "'<a href='" + json.url + "' target='_blank'" + "'>" + json.display_name + "</a>'" + " is currently offline";
                if (json.logo !== null) {
                    picture = 'url("' + json.logo + '")';
                } else {
                    picture = 'url("http://seeklogo.com/images/T/twitch-logo-4931D91F85-seeklogo.com.png")';
                }
                updateHTML(".offline");
            }
        });
    }


}

$('[data-toggle="tooltip"]').tooltip();

HMTL:

<html>

<head>
  <meta charset=utf-8/>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="finaltwitch.css" />


  <title>Twitch Streamers</title>

</head>


<body>
    
    <div class="content">
        
      <div class="row" id="header">
          
    <div class="row"><h1>Twitch Streamers</h1></div>
        <div class="options row">
          <div id="all">
              <button class="btn selector active" data-toggle="tooltip" data-placement="bottom" title="All"><i class="fa fa-user"></i></button>
          </div>
          <div id="online">
            <button class="btn selector" data-toggle="tooltip" data-placement="bottom" title="Online"><i class="fa fa-toggle-on"></i></button>
          </div>
          <div id="offline">
            <button class="btn selector" data-toggle="tooltip" data-placement="bottom" title="Offline"><i class="fa fa-toggle-off"></i></button>
          </div>
        </div>
      </div>
        
      <!--<ul id="streamers"></ul>-->
        <section class="online"></section>
        <section class="offline"></section>
        <section class="unavailable"></section>
      
        
      <div class="row" id="footer">
      </div>
        
    </div>
    


  <!-- jQuery & Boostrap files -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="twitch.js"></script>
</body>

</html>

Any help or any direction would be welcome, just anything that would set me on the right path again.

Thanks!

Solution

Unless I'm missing something, your initial load code seems to work fine in your fiddle once you set the loadtype in the JavaScript options in the fiddle to anything but onLoad.

If you need your buttons to work, just attach click events to them in your onload callback:

  $('#all button').on('click', function() {
    showAll();
  });

  $('#online button').on('click', function() {
    showOnline();
  });

  $('#offline button').on('click', function() {
    showOffline();
  });

Updated fiddle: https://jsfiddle.net/un5wdnqn/4/