0
<未定義：1 GETます。http：// localhostを：63342/Twitchtv /未定義404（見つかりません）>
$(document).ready(function() {
loadStreamInfo();
displayAll();
});
var allStreamInfo = [{"user" : "ogaminglol"},{"user" : "faceittv"},{"user" :"twitch"},{"user" :"hearthstonesea"},{"user" :"stephensonlance"},{"user" :"aegabriel"}];
function loadStreamInfo() {
for(var i = 0; i < 6; i++) {
(function (j) {
$.ajax({
url:("https://wind-bow.gomix.me/twitch-api/streams/" + allStreamInfo[j].user),
jsonp: "callback",
dataType: "jsonp",
success: function (data) {
if(data.stream == null){
allStreamInfo[j]["status"] = "offline";
} else {
allStreamInfo[j]["status"] = "online";
}
}
});
})(i)
}
for(var i = 0; i < 6; i++) {
(function (j) {
$.ajax({
url:("https://wind-bow.gomix.me/twitch-api/channels/" + allStreamInfo[j].user),
jsonp : "callback",
dataType : "jsonp",
success: function (data) {
allStreamInfo[j]["logo"] = data.logo;
allStreamInfo[j]["gameName"] = data.game;
allStreamInfo[j]["views"] = data.views;
allStreamInfo[j]["followers"] = data.followers;
allStreamInfo[j]["url"] = data.url;
}
});
})(i)
}
}
function displayAll() {
for(var i = 0; i < 6; i++){
(function (j) {
var outString = "";
outString += "<div class='item'>";
outString += "<img src='" + allStreamInfo[j].logo + "' alt='logo'>";
outString += "<a href='" +allStreamInfo[j].url + "'><span id='gameName'>" + allStreamInfo[j].gameName +"</span></a>";
outString += "<span id='state'>"+ allStreamInfo[j].status+"</span>";
outString += "<span id='views-block'>Views:<span id='view'>" + allStreamInfo[j].views + "</span></span>";
outString += "<span id='follow-block'>Followers:<span id='followed'>" + allStreamInfo[j].followers +"</span></span>";
outString += "</div>";
$("#result").append(outString);
})(i)
}
}body {
padding: 40px;;
}
.toggle-button {
width: 400px;
color: white;
height: 100px;
text-align: center;
margin: 0 auto;
}
.all {
background-color: #6699CC;
width: 30%;
height: 70px;
line-height: 70px;
border-right: 2px solid grey;
display: inline;
float: left;
cursor: pointer;
}
.online {
cursor: pointer;
line-height: 70px;
background-color: cadetblue;
border-right: 2px solid grey;
width: 30%;
height: 70px;
display: inline;
float: left;
}
.offline {
cursor: pointer;
background-color: darkorange;
line-height: 70px;
width: 30%;
height: 70px;
display: inline;
float: left;
}
#result {
margin-top: 30px;
}
.item {
width: 500px;
height: 70px;
margin: 5px auto;
background-color: #666699;
border-left: 4px solid red;
color: whitesmoke;
/*border: 2px solid red;*/
}
a {
text-decoration: none;
}
img {
width: 50px;
height: 50px;
margin-top: 10px;
margin-left: 20px;
margin-right: 21px;
}
span#gameName,span#views-block,span#state ,span#follow-block {
position: relative;
bottom: 18px;
}
span#gameName,span#state,span#views-block{
margin-right: 21px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-button">
<div class="all" onclick="displayAll()">All</div>
<div class="online" onclick="displayOnline()">Online</div>
<div class="offline" onclick="displayOffline()">Offline</div>
</div>
<div id="result">
</div>昨日の後、私はhoisting問題を解決します。ここにはpostがあります。この朝、私はコンソールにこのエラーメッセージ404 not foundを取得します。それは前のページと同じです。まだ多くのundefine in pageを持っています。デバッグウィンドウで、私はすべての$.ajax要求がうまく動作することがわかりました。どうしてか分かりません。
「Error_state_photo」 - > **申し訳ありません。 Imgurは能力を超えているので、私たちは火の上で私たちの髪を駆け回るのに忙しいです！これは、サイトの負荷が非常に大きい場合や、メンテナンス中に発生する可能性があります。** - これは、外部サイトに依存しない質問自体にすべての関連情報を含める理由です。怠け者 –
loadStreamInfoを実行しますが、displayAllを実行する前に完了するのを待っていません - 非同期コードが完了するまで待つ必要があります –
@JaromandaX私は新鮮です。問題の解決方法を教えてください。 – Lewis