2

On my page, I'm logging this:

console.log(self);
console.log(self.data.events);

The self is showing data, however self.data.events is showing undefined, how am I referencing this wrong?

enter image description here

sojim2
  • 1,245
  • 2
  • 15
  • 38

1 Answers1

3

but why is console.log(self.data) working but not console.log(self.data.events)?

As @Nick Parsons hinted in his comment, it might be because console.log behaves asynchronously in some browsers and will not log a "snapshot" at the time it was logged but will reflect updates on whatever is referenced, in this case self.data (which is initially defined as an empty object!)...

I have a feeling that @Dinesh Kumar's comment is on the right track, you're calling these functions after each other:

self.load_event_data();
self.load_zip_codes();
self.bind_events();
self.handle_filter_params();
self.cluster();

the issue is within self.cluster() but it is possible that the AJAX call you're making in self.load_event_data() is not be done yet when self.cluster() is called, so I'd suggest you try and call self.cluster() from within self.load_event_data() whenever you got data updated with the events.

exside
  • 3,736
  • 1
  • 12
  • 19
  • It seems like no matter where I put `self.cluster();` it shows undefined, this must mean the `xhr` itself is asynchronous and only loads when it's done, I tried even at the end of the script and it still shows `undefined` very strange. I've added `self.cluster();` to line `280` now and still no luck. – sojim2 Aug 04 '19 at 04:44
  • looks like `setTimeout(function() {self.cluster()}, 1000);` somewhat , works but causing other errors still. – sojim2 Aug 04 '19 at 06:56
  • Looks like I needed to put the self.cluster() in the xhr callback section for it to complete. Though it didn't specifically resolved the issue, it did point me to the right direction. Thanks for that. – sojim2 Aug 04 '19 at 15:15