Parsing JSON multiple times to extract data on the top 10 games from Twitch's API

Question

Parsing JSON multiple times to extract data on the top 10 games from Twitch's API

Hey there! I have a little coding challenge for you. The current code below is only fetching the first channel from the JSON. My goal is to fetch all the streams and display them in a grid format with three streams per row. Can you help me achieve this? (Bonus question: How can I format all the fetched streams into a nice row-per-row grid which features three streams in each row)

<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>

On top of that, I need assistance with creating a script that fetches the top 10 games from a JSON. Check out the link here: . The process should be similar to the one above, but I'm hitting a mental block and could use your expertise to get this done.

javascript jquery html css

Answer 1

Answer №1

By combining loops and inline-block elements, you can efficiently complete tasks. In this example, I utilized jQuery to organize rows of three cells each.

var twitchApi = "https://api.twitch.tv/kraken/streams";                                                                                                                          
$.getJSON(twitchApi, function (json) {
    var streamRow = $("<div class='stream-row'></div>").appendTo("#twitch"); // Creating the first row.
    var streamCell;
    var streamVideo;
    for (var i = 0; i < json.streams.length; i++)
    {
        if (i % 3 == 0 && i > 0)
        {
            // Start a new row every third iteration.
            streamRow = $("<div class='stream-row'></div>");
            $("#twitch").append(streamRow);
        }
        // Generate a cell with a video and include it in 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);
    }
});

For the top ten feature, I implemented another loop. Since the API already provides data for 10 games, I used the length property instead of inputting a hardcoded number.

var twitchApi = "https://api.twitch.tv/kraken/games/top";                                                                                                                        
$.getJSON(twitchApi, function (json) {
    for (var i = 0; i < json.top.length; i++)
    {
        // Utilize the information from the JSON as needed.
        console.log(json.top[i].game.name)
    }
});

Answer 2

By combining loops and inline-block elements, you can efficiently complete tasks. In this example, I utilized jQuery to organize rows of three cells each.

var twitchApi = "https://api.twitch.tv/kraken/streams";                                                                                                                          
$.getJSON(twitchApi, function (json) {
    var streamRow = $("<div class='stream-row'></div>").appendTo("#twitch"); // Creating the first row.
    var streamCell;
    var streamVideo;
    for (var i = 0; i < json.streams.length; i++)
    {
        if (i % 3 == 0 && i > 0)
        {
            // Start a new row every third iteration.
            streamRow = $("<div class='stream-row'></div>");
            $("#twitch").append(streamRow);
        }
        // Generate a cell with a video and include it in 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);
    }
});

For the top ten feature, I implemented another loop. Since the API already provides data for 10 games, I used the length property instead of inputting a hardcoded number.

var twitchApi = "https://api.twitch.tv/kraken/games/top";                                                                                                                        
$.getJSON(twitchApi, function (json) {
    for (var i = 0; i < json.top.length; i++)
    {
        // Utilize the information from the JSON as needed.
        console.log(json.top[i].game.name)
    }
});

Answer 3

Answer №2

To simultaneously fetch multiple streams with the same data, you can utilize a for loop.

I corrected your streamVideo variable by adding ".channel" before ".name" (I recommend using a JSON viewer for a clearer understanding of the structure, such as Online JSON Viewer)

I also updated the script to display 10 iframes (I used the embed code from Twitch as your embed was too small).

For the styling, I suggest setting a 30% width for each iframe so that they align in rows of 3, with any remaining iframes in the bottom row.

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>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

To simultaneously fetch multiple streams with the same data, you can utilize a for loop.

I corrected your streamVideo variable by adding ".channel" before ".name" (I recommend using a JSON viewer for a clearer understanding of the structure, such as Online JSON Viewer)

I also updated the script to display 10 iframes (I used the embed code from Twitch as your embed was too small).

For the styling, I suggest setting a 30% width for each iframe so that they align in rows of 3, with any remaining iframes in the bottom row.

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>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Parsing JSON multiple times to extract data on the top 10 games from Twitch's API

Answer №1

Answer №2

Similar questions

Ways to make an AngularJS Expression show an empty value

Is it possible to manipulate an image tag's image using only CSS?

Mobile-formatted inline Bootstrap

What is the reason behind TypeScript enclosing a class within an IIFE (Immediately Invoked Function

Guide on presenting an image retrieved from a database with ajax

How can I place text on top of an image with a filter using Bootstrap?

The animation of the splash screen in Angular is quite jarring and lacks fluidity

Combining D3.js tooltip positioning with CSS overflow styling

What is the best way to merge different Vue JS instances (each linked to different html divs) into one cohesive unit using Vue

An easy way to place text along the border of an input field in a React JS application using CSS

Making an asynchronous request from jQuery to a Slim Framework API endpoint

Troubleshooting Problems with CSS Span Placement

Photographs housed within a pop-up window

Turning simple text into JSON format

Maximizing Efficiency with the jQuery setInterval() Function: Optimizing the Initial Loop

Get rid of the add to cart message and modify the button that says "add to cart" on Woocommerce

Vue Loader: Multiple loaders for a single file extension

Node.js encounter an error while processing an Ajax request

Leverage the power of Next.js to dynamically render a specific section of an HTML webpage

Starting jQuery on embedded websites