使用Twitch API显示离线/在线流光

debugcn 发表于 Dev

不不不

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

我正在使用Twitch API来显示所有在线和离线流光。我从这里开始执行代码（他完成的项目）并将其应用于我的项目...但是我再次陷入困境。我感到非常困惑。

这是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>

任何帮助或任何方向都将受到欢迎，只要有什么能让我再次走上正确的道路。

谢谢！

Xorspark

除非我丢失了某些内容，否则将小提琴的JavaScript选项中的loadtype设置为除onLoad之外的任何内容时，您的初始加载代码似乎都能在您的小提琴中正常工作。

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

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

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

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

更新的小提琴：https : //jsfiddle.net/un5wdnqn/4/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。