使用 Twitch API 显示 offline/online 主播

Question

几天来我一直在努力让这个项目运行起来，无论我遵循了多少教程或查看了多少示例，我总是会疯狂地陷入无法运行的代码中。

我正在使用 Twitch API 来显示所有在线和离线流媒体。我开始关注 the code here (his finished project) 并将其应用到我的项目中……但我又被卡住了。我感到非常困惑。

这是 JSFiddle，这是 JS（这很乱，我知道！）：

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>

欢迎任何帮助或指导，只要能使我再次走上正轨。

谢谢！

Answer 1

除非我遗漏了什么，一旦你将 fiddle 中的 JavaScript 选项中的加载类型设置为任何东西，你的初始加载代码似乎在 fiddle 中工作正常onLoad.

如果您需要按钮工作，只需在 onload 回调中将 click 事件附加到它们即可：

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

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

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

已更新 fiddle：https://jsfiddle.net/un5wdnqn/4/

使用 Twitch API 显示 offline/online 主播

Using the Twitch API to display offline/online streamers

html

javascript

css

twitch