Turn script into a function which extracts the div ID and places it inside

Question

Alright, so I've got this script which basically drains the thumbnails and streams from the twitch API/JSON.

$(function() {
    var i=0;
    var twitchApi = "https://api.twitch.tv/kraken/streams";
    var twitchData;
    $.getJSON(twitchApi, function(json) {
        twitchData = json.streams;

        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 img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>')
            $('#twitch').append(img);
            img.click(function(){
            $('#twitch iframe').remove()
            $('#twitch').append('<iframe style="width: 600px;" src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
          });
        }
    }       

    $('#load').click(function() {
        setData();
    }); 
});

And I've got this code which basically filters the games. It works. When I click on League of Legends ( the onClick event is set on the #lol div, thus it works ), the div flushes and it returns with only League of Legends stream etcetera. But the code is veeeery messy. And I need a way how to make it cleaner ( without copy and pasting the script into each div ):

<div id="games" style="cursor: pointer;">
        <div id="lol">
            <p>League of Legends</p>
        </div>
        <div id="dota">
            <p>DOTA 2</p>
        </div>
        <div id="hearthstone">
            <p>Hearthstone</p>
        </div>
        <div id="cs">
            <p>Counter-Strike</p>
    </div>
    <div id="cod">
        <p>Call of Duty</p>
     </div>
     <div id="minecraft">
        <p>Minecraft</p>
     </div>
     <div id="overwatch">
        <p>Overwatch</p>
     </div>
     <div id="xcom">
        <p>XCOM 2</p>
     </div>
     <div id="starcraft">
        <p>Starcraft</p>
     </div>

<script>

        $('#lol').click(function(){
            $('#twitch').children().fadeOut(500).promise().then(function() {
            $('#twitch').empty();
            var twitchApi = "https://api.twitch.tv/kraken/streams?game=League%20of%20Legends";
            $.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;
            $('#twitch').append('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"></img>'); 
        }
    });
});
});


</script>


<script>
            $('#dota').click(function() {
                        $('#twitch').children().fadeOut(500).promise().then(function() {
                            $('#twitch').empty();
                            var twitchApi = "https://api.twitch.tv/kraken/streams?game=Dota%202";
                            $.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;
                                    $('#twitch').children().fadeIn(500).promise().then(function() {
                                            $('#twitch').append('<img style="width: 250px; height: 250px;" src="' +streamThumb + '"></img>');
                                        });
                                };
                            });
                        });
                    });
</script>

<script>
            $('#hearthstone').click(function(){
            $('#twitch').children().fadeOut(500).promise().then(function() {
            $('#twitch').empty();;
            var twitchApi = "https://api.twitch.tv/kraken/streams?game=Hearthstone:%20Heroes%20of%20Warcraft";
            $.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;
            $('#twitch').append('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"></img>'); 
        }
    });
});});
</script>

<script>
            $('#cs').click(function(){
            $('#twitch').children().fadeOut(500).promise().then(function() {
            $('#twitch').empty();
            var twitchApi = "https://api.twitch.tv/kraken/streams?game=Counter-Strike:%20Global%20Offensive";
            $.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;
            $('#twitch').append('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"></img>'); 
        }
    });
});});
</script>

    </div>

Can anyone help me out? I was thinking of making a function script which reads the div's paragraph and inserts it here:

var twitchApi = "https://api.twitch.tv/kraken/streams?game=Hearthstone:%20Heroes%20of%20Warcraft";

So I have no idea how to make a var gameName which represents the div's paragraph. It needs to take what's inside the paragraph and place it here:

var twitchApi = "https://api.twitch.tv/kraken/streams?game="' + paragraph + ";

But honestly, I have no idea how to do it. The code works, but it's ugly and messy and I have no idea how to clean it up.

Answer 1

So you can setup a jQuery selector to respond to click events for each div inside the parent div with id="games". This would then be placed inside your document ready function $(function(){...});. Once the event is triggered you can find the p element inside the div that was clicked and get the text() value which would be the name of the game.

$('div#games div').onclick(function(){
   var gameDiv = $(this); // Get which div was clicked here
   $('#twitch').children().fadeOut(500).promise().then(function() {
        $('#twitch').empty();
        var gameName = $(gameDiv).find('p').text().replace(' ', '%20');  // Get the game name
        var twitchApi = "https://api.twitch.tv/kraken/streams?game=" + gameName;   // Build the URL here
        $.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;
                $('#twitch').children().fadeIn(500).promise().then(function() {
                    $('#twitch').append('<img style="width: 250px; height: 250px;" src="' +streamThumb + '"></img>');
                });
            }
        });
    });
});