【发布时间】：2016-08-27 13:26:46
【问题描述】：
我已经尝试让这个项目运行好几天了，无论我遵循了多少教程或查看了多少示例，我总是疯狂地卡在不起作用的代码中。
我正在使用 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>
欢迎任何帮助或任何方向，只要任何能让我再次走上正确道路的事情。
谢谢！
【问题讨论】：
标签： javascript html css twitch