1
ユーザーが入力しているときにページ上のチャネルを検索するために使用する検索フィルタがあります。ただし、このAPIを呼び出すと、チャンネルオブジェクトがすべて表データの同じ行に格納されるため、各オブジェクトを別の行に分けることができません。オブジェクトをそれぞれのテーブルデータに格納していますが、この問題に取り組む具体的な方法はわかりません。 forループを使用しているのでしょうか、おそらくHTMLにテーブルのデータを追加する必要がありますか？あなたは私のコードブックをチェックアウトし、私の関数内の最後のforループを実行してアイデアを得るためにコメントの中カッコを削除することができます。 https://codepen.io/baquino1994/pen/EvLrPV HTML：要求されたオブジェクトをテーブル内の別々の行に移動する
<head>
<link href="https://fonts.googleapis.com/css?family=Saira+Condensed" rel="stylesheet">
</head>
<body>
<div class='container-fluid'>
</div>
<div class='text-center' id="border">
<h1 id="font">Twitch TV JSON API</h1>
<h2 id="fcc" target="_blank"></h2>
</div>
<!-- <div class='spacer'></div>
<div id="border">
<div class='row'>
<div class='col-md-3' id='channel'>
Channel:<br>
</div>
<div class='col-md-3' id='status'>
Status:<br>
</div>
<div class='col-md-3' id='game'>
Game:<br>
</div>
<div class='col-md-3' id="logo">
Logo:
</div> -->
<!-- <div id='follower'>Remove me<div> -->
<!-- </div> -->
<div class="container">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Channel.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:25%;color:#FAF0E6">Channel</th>
<th style="width:25%;color:#FAF0E6">Status</th>
<th style="width:25%;color:#FAF0E6">Game</th>
</tr>
<tr>
<td id="channel"style="color:red"></td>
<td id="status"></td>
<td id="game"></td>
</tr>
</table>
</div>
<div class='spacer'></div>
<!-- </div> -->
</body>
CSS
body{
background-image:url('https://www.twitch.tv/p/assets/uploads/combologo_474x356.png');
}
#border {
background-color: #000000;
color: white;
padding: 50px;
width: 35%;
margin-right: auto;
margin-left: auto;
border-radius: 0px;
font-size: 1.5em;
padding-bottom: 2%;
}
a{
color:white;
}
.spacer {
padding: 1%;
}
/* * {
box-sizing: border-box;
} */
#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid red;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
background-color:black;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
color:red;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#channel{
color:red;
}
#font, #fcc, .header, #channel, #status, #game {
font-family: 'Saira Condensed', sans-serif;
}
.intro{
color:green;
}
JS
$(function() {
var follower = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin"];
//An array of users or in this case, streamers that will be placed on the document.
$.ajax({
type: 'GET',
url: 'https://api.twitch.tv/kraken/streams/freecodecamp',
headers: {
'client-ID': 'ziu3fledjh14rd812socrwluiz1o31'
},
// Twitch requires a client id to request their data now. You can bypass this by using the https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2?callback=? url to request certain objects. However, some objects won't be available if you do choose to bypass registering for a client_id.
success: function(data) {
if (data.stream === null) {
$('#fcc').html(' FreeCodeCamp is Offline');
} else {
$('#fcc').html(' FreeCodeCamp is Online!');
}
},
error: function(err) {
alert("Error");
}
});
for (var i = 0; i < follower.length; i++) {
//change this to get
$.ajax({
type: 'GET',
url: 'https://api.twitch.tv/kraken/streams/' + follower[i],
headers: {
'client-ID': '59x9ex7f5zzongzntqx0zrwleoxy12'
},
//You could also use $.getJSON and use the client_Id as a token to request Twitch's objects.
success: function(dataI) {
var name = dataI._links.self.slice(37)
if (dataI.stream === null) {
$('#status').append(' is Offline<br>')
$('#channel').append('<a target="blank" href="https://www.twitch.tv/' + name + '">' + name + '</a><br>')
$('#game').append('N/A<br>');
} else {
$('#status').append(' is Online<br>')
$('#channel').append('<a target="blank" href="https://www.twitch.tv/' + name + '">' + name + '</a><br>')
$('#game').append(dataI.stream.game + '<br>');
}
},
error: function(err) {
alert("Error: One or more users is no longer avaialble");
}
});
}
// for(var i=0; i< follower.length;i++){
// $.ajax({
// type:'GET',
// url:'https://api.twitch.tv/kraken/channels/'+ follower[i],
// headers:{
// 'client-ID': '59x9ex7f5zzongzntqx0zrwleoxy12'
// },
// success: function(d2){
// var logo = d2.logo;
// if(d2.logo == null){
// $('#logo').append('<img src= http://jesusldn.com/wp-content/uploads/2015/06/noimage.png>')
// }
// else{
// $("#logo").append('<img src='+logo+">'")
// }
// }
// });
// }
})
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
それはjQueryのプラグインやブートストラップを持っているとして、私は、私のcodepenへのリンクを提供しています。
？ –
私はちょうどそれを追加しました。申し訳ありません。 – Baquino