Accessing object properties from within another object (JavaScript / jQuery)

Question

Hi,

I am trying to access properties of a config object from within another object:

var myConfigObj = {
  $myCachedSelector: $('#mySelector')
}

var myObj = {
  $selector: myConfigObj.$myCachedSelector,
  url: 'http://www.someurl.com/somepath'
}

$.each([ myObj, mySecondObj, myThirdObj ], function() {
  this.$selector.load(this.url, function(){
  //do something
});

When trying to use $selector in the each function then, it returns "undefined". Both objects are in the same scope, and I don't know what the problem is.

Answer 1

This code worked well enough for me, with a few minor tweaks:

• This is probably the problem: Firefox is complaining about the semicolon, should be:

  var myConfigObj = {
     $myCachedSelector: $('#mySelector')
  }
  

• Should be in $(document).ready, of course.
• Missing some }); at the end (probably a copy/paste thing)

Answer 2

1. Install Firebug in Firefox;
2. In the "Scripts" pane, set a breakpoint on the line that causes the error;
3. When stopped at the breakpoint, examine this in the right-hand "Watch" pane;
4. If the this object you're stopped on has a $selector property which has a load method then it's not the cause of your problem, so continue round the loop.
5. When the this object doesn't have a $selector property, or has one that doesn't have a load method, you've found your culprit. Now work out why you are sending it into that loop, or where you are failing to initialise it.