多個JSON解析+解析Twitch API的前10款遊戲

Question

好的。所以下面的代碼只從列表中獲取第一個通道，我希望它從JSON中獲取所有的流。 （獎金的問題：我怎樣才能全部取出流格式化爲一個不錯的行每行網格，其具有三個流的每一行中）

<script> 
    var twitchApi = "https://api.twitch.tv/kraken/streams"; 
    $.getJSON(twitchApi, function (json) { 
    var streamGame = json.streams[0].game; 
    var streamThumb = json.streams[0].preview; 
    var streamVideo = json.streams[0].name; 
    $('#twitch').append('<li><iframe src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe></li>'); 
    } 
    ); 
</script> 

而且我需要幫助的第二件事是如何創建一個腳本從這個JSON獲取前10個遊戲：https://api.twitch.tv/kraken/games/top ..應該與上面的那個非常相似，但是我的大腦被凍結了，我需要完成這個。

Answer 1

對於使用相同數據同時獲取多個流，您可以使用作爲循環。

固定的streamVideo變量，「.channel」是「名稱」之前（我推薦使用JSON觀衆獲得結構的清晰的視野，像Online JSON Viewer

並取得腳本，以便10個iframe會丟失顯示（也抓住從抽搐的嵌入代碼，你的嵌入是如此之小）。

造型我讓它給你自己，我對造型iframes一無所知，你可以嘗試設置每個30％的寬度，所以有3排，其他排在最後一排。

\t \t var twitchApi = "https://api.twitch.tv/kraken/streams"; 
 
\t \t $.getJSON(twitchApi, function(json) { 
 
\t \t for (i = 0; i < 10; i++) { 
 
\t \t  var streamGame = json.streams[i].game; 
 
\t \t  var streamThumb = json.streams[i].preview; 
 
\t \t  var streamVideo = json.streams[i].channel.name; 
 
\t \t  $('#twitch').append('<li><iframe src="https://player.twitch.tv/?channel=' + streamVideo + '" frameborder="0" scrolling="no" height="378" width="620"></iframe><li>'); 
 
\t \t } 
 
\t \t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

您可以通過循環和內嵌塊元素的組合來獲得所需的內容。在這裏，我使用jQuery創建每個三個單元格的行。

var twitchApi = "https://api.twitch.tv/kraken/streams";                               
$.getJSON(twitchApi, function (json) { 
    var streamRow = $("<div class='stream-row'></div>").appendTo("#twitch"); // Create first row. 
    var streamCell; 
    var streamVideo; 
    for (var i = 0; i < json.streams.length; i++) 
    { 
     if (i % 3 == 0 && i > 0) 
     { 
      // Create a new row every multiple of 3. 
      streamRow = $("<div class='stream-row'></div>"); 
      $("#twitch").append(streamRow); 
     } 
     // Create a cell with a video and add it to the row. 
     streamVideo = json.streams[i].channel.name; 
     streamCell = $("<div>", { 
      css: { 
       "class": "stream-cell", 
       "display": "inline-block" 
      } 
     }); 
     streamCell.append('<iframe src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>'); 
     streamRow.append(streamCell); 
    } 
}); 

您使用另一個循環的前十名。該API已經返回10場比賽，所以我用長度而不是硬編碼10.

var twitchApi = "https://api.twitch.tv/kraken/games/top";                               
$.getJSON(twitchApi, function (json) { 
    for (var i = 0; i < json.top.length; i++) 
    { 
     // Do whatever you need here with the info from the JSON. 
     console.log(json.top[i].game.name) 
    } 
});