Scope issue

JavaScript
1

I admitted got this function from a template, but I’m having problems modifying it to return my variable. The variable is events. I fill it with the http function and it correctly prints in console.log but it’s undefined before I return it. I’m calling Events.all(); but getting nothing back. What am I doing wrong?

  var events;
  $http.get(localhost).then(function(resp, events) {
  events = resp.data.nodes;
  console.log(events);
  }, function(err) {
    console.error('ERR', err);
  })
  return {
    all: function() {
      return events;
    },
    get: function(eventId) {
      // Simple index lookup
      return events[eventId];
    }
  }
2

The code you posted doesn’t create or reference Events it only references events which is a completely different variable.

If you were using “use strict”; then you’d get an error when you try to reference varaibles that are undefined due to you having made a typo rather than it just creating a new global variable.

3

In addition to the problem felgall mention, there’s another problem. You’re not actually setting the global events variable. Instead you’re setting the local events parameter. You’ll need to name them different things if you don’t want one to shadow the other.

4

Thank you for the reply. Sorry, I probably created some confusion with Events.all() as it relates to this AngularJS template that I have. To be a bit more clear, when I do a console.log(events); right after the all: function() { line, it is undefined. Same command higher up prints successfully. So, I am not understanding something that is probably fairly simply about scope, because somewhere in there, events is losing the data that I am giving it.

5

So, I’ve been reading a bit about this and read that it’s bad to set up global variables. I realize that may be what it looks like I was trying to do, but is there a way to modify what I have so that events is passed safely between the above code?

6

That’s right. I suppose in your code it only looks like a global because we’re looking at an incomplete snippet. So I’ll rephrase my response:

You’re not actually setting the outer-scope events variable. Instead you’re setting the local events parameter. The way you modify what you have so that events is passed safely between the above code is to name them different things so that one doesn’t shadow the other.

7

I feel like a lightbulb is about to go off, but I’m still not grasping what is going wrong. I did some searching and gathered that maybe I should be using this.events to access the outer-scope variable. Does not work, but is this closer to where I need to be?

.factory('Events', function($http) {
  var events;
  $http.get(localhost).then(function(resp) {
  this.events = resp.data.nodes;
  console.log(this.events);
  }, function(err) {
    console.error('ERR', err);
  })
  return {
    all: function() {
      console.log(this.events);
      return this.events;
    },
    get: function(eventId) {
      // Simple index lookup
      return events[eventId];
    }
  }
});
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.