jQuery Global Variable in Each Statement

Question

So, I am trying to make it so I can create a variable globally throughout my whole document with jQuery, but inside of an .each() statement.

Where I put "var previous = item.channel.display_name" is the variable I am trying to create.

Code:

jQuery(function(){ 
var streams = null;
jQuery.getJSON("https://api.twitch.tv/kraken/search/streams?q=path%20of%20exile&callback=?", function (data) {
    streams =  data.streams;
    jQuery("#next").show();
    jQuery("#prev").show();
    jQuery("#next").click();
});

var globalCnt = 0;
jQuery("#next").click(function() {
    var localCnt = 0;
    var itemsToShow = 1;
         jQuery.each(streams, function (index, item) {
             localCnt++;
             if(localCnt > globalCnt && itemsToShow > 0) {
             jQuery("#content").empty();
             jQuery("#content").html('<object style="margin-left:0.5%;" type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + item.channel.display_name + '" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=' + item.channel.display_name + '&auto_play=false&start_volume=25" /></object><iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=' + item.channel.display_name +'&amp;popout_chat=true" height="378" width="350"></iframe>');
                 globalCnt++;
                 itemsToShow--;
                 var previous = item.channel.display_name;
             }
        });
    if(itemsToShow > 0)
        jQuery("#showBtn").hide();
});
jQuery("#prev").click(function() {
    var localCnt = 0;
    var itemsToShow = 1;
         jQuery.each(streams, function (index, item) {
             localCnt++;
             if(localCnt > globalCnt && itemsToShow > 0) {
             jQuery("#content").empty();
             document.write(previous);
             jQuery("#content").html('<object style="margin-left:0.5%;" type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + previous + '&auto_play=false&start_volume=25" /></object><iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=' + previous +'&amp;popout_chat=true" height="378" width="350"></iframe>');
                 globalCnt++;
                 itemsToShow--;
             } 
        });
    if(itemsToShow > 0)
        jQuery("#showBtn").hide();
});
});

Guillermo · Accepted Answer · 2013-11-27 17:16:40Z

2

There is nothing wrong with creating global variables, but you must be sure of some things if you want to do it properly.

If possible add just one global variable and then wrap all your code on that variable. Not good idea to create many global variables.
In your case, you should create something like: var myApp = myApp || {} That is: myApp is equal to myApp (if it already exists or myApp will be an empty object if myApp doesn´t exists previously.

Then, this line: var previous = item.channel.display_name;

will become: myApp.previous = item.channel.display_name.

answered Nov 27, 2013 at 17:16

Guillermo

1,5334 gold badges18 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user3023566 Over a year ago

Ohkk I understand now. But how would I structure this to actually work in my script? I know how to create the global variable now but how do I make it save the data under previous as the previous data before you click next and then if you click previous it will load that previous data. Do you understand what I mean or should I try to word it differently?

Guillermo Over a year ago

Yes, I understand. The thing is that if you iterate over and over again your script will always store the latest value in your next and previous values. If I were you I would try to build an array like this. var myStreams = [] //Declare the array we´re going to use. //your each iteration myMap[n] = yourStream. When the loop is complete, you´ll have your streams kind of mapped in an array, so if you get the index of your stream, you can bring the next video and previos, by substracting or adding 1 to your index. Just an idea...

user3023566 Over a year ago

I've never used "maps" or however you call them before. I guess you could say I'm not very advanced with jQuery or very good for that matter. I'm still learning, do you think it would be possible for you to send me a jsFiddle of an example of this map function. Although don't do it with my code because than I would just be copying and pasting, I wouldn't learn much.

Guillermo Over a year ago

Don´t worry let me think and build a jsfiddle.

user3023566 Over a year ago

Still there? @Guillermo

|

Adam Rackis · Accepted Answer · 2013-11-27 17:03:58Z

1

I'm not condoning global variables, but if you want to create one inside of another scope, you'd add it to the window object:

window.globalVal = "foo";

window is a property on the global object that points to itself. Adding properties to it is tantamount to creating a global variable.

So for your case, you can do

window.previous = item.channel.display_name;

and then access previous from anywhere—assuming it's not shadowed, of course. On that last note, I'd be remiss if I didn't mention that global variables are generally a bad idea. Use them with extreme caution.

answered Nov 27, 2013 at 17:03

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

2 Comments

user3023566 Over a year ago

This worked! Thanks man! Although the functionality of my script doesn't work, as you can tell by this script I want the previous button to bring you to the previous object and the next to bring you to the next object. Check it out live here -> codeeplus.net/new.php and tell me if you see the error

Adam Rackis Over a year ago

@user3023566 - awesome. If one of these answers answered your question, be sure to accept it (I'd recommend Guillermo's answer - it's much better than mine)

Collectives™ on Stack Overflow

jQuery Global Variable in Each Statement

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related