JohnDotHR JohnDotHR - 1 year ago 179
HTML Question

Multiple JSON parses + parsing top 10 games from Twitch API

Alright. So the following code fetches only the first channel from the list, I want it to be fetching all the streams from the JSON. ( Bonus question: How can I format all the fetched streams into a nice row-per-row grid which features three streams in each row )

var twitchApi = "";
$.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="' + streamVideo + '"></iframe></li>');

And the second thing I need help with is how to create a script which fetches the top 10 games from this JSON : .. Should be quite similar to the one above but my brain is frozen and I need to finish this.

Answer Source

For fetching more than one stream at same time with the same data you can use a for loop.

Fixed your streamVideo variable, ".channel" was missing before ".name"(I recommed using a JSON viewer to get a clear vision of the structure, like Online JSON Viewer

And made the script so 10 iframes are displayed(also grabbed the embed code from twitch, your embed was so small).

The styling I let it to your own, I know nothing about styling iframes, you can try setting 30% width for each, so there are 3 per row, and the others go in the bottom row.

		var twitchApi = "";
		$.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];
		    $('#twitch').append('<li><iframe src="' + streamVideo + '" frameborder="0" scrolling="no" height="378" width="620"></iframe><li>');
<script src=""></script>