How can I access variables outside of current scope in javascript?

Question

I'm writing an application in javascript and cannot figure it out how to access the variables declared in my function, inside this jquery parse. Inside I can access global variables, but I don't really want to create global vars for these values.

Basically I want to extract file names from an xml document in the simulationFiles variable. I check if the node attribute is equal with the simName and extract the two strings inside the xml elements, that part I think it's working.

How can I extract those xml elements and append them to local variables?

function CsvReader(simName) {
    this.initFileName = "somepath";
    this.eventsFileName = "somepath";
    $(simulationFiles).find('simulation').each(function() {
       if ($(this).attr("name") == simName) {
           initFileName += $(this).find("init").text();
           eventsFileName += $(this).find("events").text();
       }
    });
}

Cᴏʀʏ · Accepted Answer · 2014-04-17 11:39:58Z

14

The this in the CsvReader function is not the same this in the each() callback (where instead it is the current element in the iteration). To access the scope of the outer function within the callback, we need to be able to reference it by another name, which you can define in the outer scope:

function CsvReader(simName) {
    this.initFileName = "somepath";
    this.eventsFileName = "somepath";
    var self = this; // reference to this in current scope
    $(simulationFiles).find('simulation').each(function() {
       if ($(this).attr("name") == simName) {
           // access the variables using self instead of this
           self.initFileName += $(this).find("init").text();
           self.eventsFileName += $(this).find("events").text();
       }
    });
}

edited Apr 17, 2014 at 11:39

answered May 2, 2010 at 20:22

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

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

6 Comments

sekmet64 Over a year ago

Thx for the quick answer, but unfortunately that doesn't work. Actually I tried it too before, but inside the unnamed function the $self is reported as not defined by firebug.

sekmet64 Over a year ago

It works like this! Sorry about that, when I saved the this to a variable I had a different error after this function call and when I debugged the debugger showed me that $self.initFileName is undefined inside, but actually it was working and and I got the result. Thanks very much!

Cᴏʀʏ Over a year ago

Are your this.initFileName and this.eventsFileName supposed to be local to your function or to the entire page? Nm... saw your post a few seconds later. Glad it works!

Cᴏʀʏ Over a year ago

@CantucciHQ: Because the this in the CsvReader function is not the same this in the each() callback. To access the scope of the outer function within the callback we need to reference it by another name. Having the $self reference allows that to happen.

Nils Over a year ago

@Cory Thanks a lot, that makes sense. I was even more confused yesterday -- I wasn't finding variables inside a $.each() using the Chrome dev tools. But it turns out the variable didn't exist inside the each() because the variable wasn't already being used in the each() ! Once I added a usage of the variable in the actual code, all worked well.

|

Matthew Flaschen · Accepted Answer · 2010-05-02 20:36:05Z

4

I made a working demo (I changed it to use classes so it would work with HTML).

function CsvReader(simName) {
    this.initFileName = "somepath";
    this.eventsFileName = "somepath";
    var context = this;
    $(simulationFiles).find('simulation').each(function() {
       if ($(this).attr("name") == simName) {
           context.initFileName += $(this).find("init").text();
           context.eventsFileName += $(this).find("events").text();
       }
    });
}

edited May 2, 2010 at 20:36

answered May 2, 2010 at 20:23

Matthew Flaschen

286k53 gold badges523 silver badges554 bronze badges

1 Comment

sekmet64 Over a year ago

This method worked great, thx! Sorry but the debugger miss leaded me a bit and taught it wasn't working.

Kuldeep · Accepted Answer · 2018-07-10 19:45:38Z

1

The simplest change you can do to make it work is... Change your function in each from normal ( function() {}) to arrow function ( () => {} ) that will automatically take the context of the function in which it is defined.

answered Jul 10, 2018 at 19:45

Kuldeep

515 bronze badges

Collectives™ on Stack Overflow

How can I access variables outside of current scope in javascript?

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related