多个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) 
    } 
});