jQueryのJSON onClickを取得する

Question

<script> 
     var twitchApi = "https://api.twitch.tv/kraken/streams"; 
     $.getJSON(twitchApi, function (json) { 
     for (var i = 0; i < 9; i++) { 
     var streamGame = json.streams[i].game; 
     var streamThumb = json.streams[i].preview.medium; 
     var streamVideo = json.streams[i].channel.name; 
     <!-- var streamViewers = json.streams[i].streamViewers; --> 
     $('#twitch').append('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"></img>'); 
    } 
}); 
</script> 

私はこのコードを持っています。そして、私はそれをonClickして画像やボタンをオンにして、9つのストリームプレビューを取得したいと考えています。どうやってやるの？誰かが私のためにコードを修正できますか？ また、JSONからフェッチされているサムネイルを編集するにはどうすればよいですか？

Answer 1

データを取得して変数に保存し、オンデマンドで表示することができます。

$(function() { 
    //varianles 
    var i=0; 
    var twitchApi = "https://api.twitch.tv/kraken/streams"; 
    var twitchData; 
    //Get data from API and store it in variable 
    $.getJSON(twitchApi, function(json) { 
     twitchData = json.streams; 

     //Set upon page load 
     setData() 
    }); 

    function setData(){ 
     var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length; 
     for (; i < j; i++) { 
      var streamGame = twitchData[i].game; 
      var streamThumb = twitchData[i].preview.medium; 
      var streamVideo = twitchData[i].channel.name; 
      <!-- var streamViewers = twitchData[i].streamViewers; --> 
      $('#twitch').append('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"></img>'); 
     } 
    }  

    //Bind click handlers 
    $('#button').click(function() { 
     setData(); 
    }); 
});