2
\$\begingroup\$

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.

\$\endgroup\$

migrated from stackoverflow.com May 17 '16 at 20:01

This question came from our site for professional and enthusiast programmers.

  • \$\begingroup\$ Go look at the jQuery documentation and do some practice. It is very easy to get the text contents of a DOM element using the syntax $(selector).text(). \$\endgroup\$ – Quantastical May 17 '16 at 19:56
-1
\$\begingroup\$

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>');
                });
            }
        });
    });
});
\$\endgroup\$
  • \$\begingroup\$ Alright. So the thing I need to do know is basically.. Create a let's say.. game.js and implement it into my HTML <script src="js/game.js"> and I can go ahead and delete the numerous scripts which I've copy pasted? Because I've tried doing that and it isn't working.. Could you please explain what I'm doing wrong atm? The script you wrote looks as it is supposed to work. I'm on a code marathon, my brain is frozen and I'm unallowed to stop, so thanks a bunch for your help. @sbonkosky \$\endgroup\$ – JohnDotHR May 17 '16 at 20:44
  • \$\begingroup\$ @JohnDotHR Are you seeing an error of some sort when you try to include the script that way? Make sure that script tag is placed after the jQuery script tag. \$\endgroup\$ – sbonkosky May 17 '16 at 21:00
  • \$\begingroup\$ Actually, yes I see one. Uncaught SyntaxError: Unexpected token ) . But sadly, I think that I'll take a break, it has gotten so bad that I'm unable to look for brackets. I'd be thankful if you could do that for me. Ugh. Thanks a lot for the help, once again. I really appreciate it. \$\endgroup\$ – JohnDotHR May 17 '16 at 21:03
  • \$\begingroup\$ @JohnDotHR haha, np, think I got it, edited my answer. \$\endgroup\$ – sbonkosky May 17 '16 at 21:07
  • \$\begingroup\$ Still the same error. :( \$\endgroup\$ – JohnDotHR May 17 '16 at 21:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.