Abrufen von JSON onClick in jQuery

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> 

Also ich habe diesen Code. Und ich möchte es so machen, dass auf einem Bild oder Knopf 9 weitere Stream-Vorschauen abgerufen werden. Wie kann ich das machen? Könnte jemand den Code für mich reparieren? Wie kann ich auch die Thumbnails bearbeiten, die vom JSON abgerufen werden?

Answer 1

Sie können die Daten erhalten und in einer Variablen persistieren und dann bei Bedarf anzeigen.

$(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(); 
    }); 
});