在单击时过滤 JSON

Filtering JSON onClick

本文关键字：JSON 过滤 单击      更新时间：2023-09-26
var twitchApi = "https://api.twitch.tv/kraken/streams";
        $.getJSON(twitchApi, function(json) {
          for (i = 0; i < 10; i++) {
            var streamGame = json.streams[i].game;
            var streamThumb = json.streams[i].preview;
            var streamVideo = json.streams[i].channel.name;
            $('#twitch').append('<li><iframe src="https://player.twitch.tv/? channel=' + streamVideo + '"
     frameborder="0" scrolling="no" height="378"
     width="620"></iframe><li>');
          }});

所以我有这个脚本，它从Twitch API JSON中提取流。如何过滤它们？例如，单击英雄联盟仅显示英雄联盟流等。

过滤这些结果可能不会达到您想要的效果，因为任何特定游戏的结果数量都会因当前时间点而异。

使用 twitch 流 api，您可以传递如下所示的搜索参数：

https://api.twitch.tv/kraken/streams?game=League%20of%20Legends

每次 getJSON 调用时清空 $('#twitch'( 元素，然后从更新的查询返回的数据重新加载。

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

一个有趣的答案，但你可以重新提交$.getJSON，并在URL中加入游戏，就像 https://api.twitch.tv/kraken/streams?game=League%20of%20Legends

相关文章：