CODEWITHSUNDEEP
javascriptasynchronousgoogle-feed-api
BigHandsome
BigHandsome

Reputation: 5393

How to access an object from a callback function?

I feel bad because it is very likely this has already been answered and I am just not using the right search terms. I am very new to asynchronous JavaScript. So, I will lead with an apology. If someone could even just help me get the right search terms I would most appreciate it.

I am trying to use the Google feeds api. I have it working when I follow the stock example as laid out in the hello world section. I am trying to make something that is a little more extensible so that I can use it in several places. So I created an object...

function AlertRSS(num, url, div, date) {
  this.num = typeof num !== 'undefined' ? num : 5;
  this.url = typeof url !== 'undefined' ? url : 'http://arstechnica.com/author/caseyjohnston/feed/';
  this.sel = typeof sel !== 'undefined' ? sel : '#alert';
  this.date = typeof date !== 'undefined' ? date : this.getYesterday();
}

I then try to call the object inside of the method...

AlertRSS.prototype.displayFeed = function() {
  var retval = null;
  var feed = new google.feeds.Feed(this.url);
  feed.load(function(result) {
  var tmp = this;
    if (!result.error) {
      for ( var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        console.log(sel + ' <h2><a href="' + entry.link + '">' + entry.title + '</a></h2><br  />');
        $(tmp.sel).append('<h2><a href="' + entry.link + '">' + entry.title + '</a></h2><br  />');
      }
    }
  });
};

However, it seems like I am not able to access the properties from the object. I keep getting a Uncaught ReferenceError: sel is not defined in the console.

I think the issue is related to scope, but at this point I feel a little out of my depth. Any help would be most appreciated.

Update

For a first post this was a travesty. I had numerous mistakes in my code. Both responses were correct. However, in case another poor newb like me sees this question, I wanted to put working code out there.

The issue turned out to be placement of the var tmp = this; line. It needs to be placed outside of the internal callback function to work. As per Tomasz Nurkiewicz suggestion, I also changed var tmp to var that. Working code is as follows:

function AlertRSS(num, url, sel, date) {
  this.num = typeof num !== 'undefined' ? num : 5;
  this.url = typeof url !== 'undefined' ? url : 'http://arstechnica.com/author/caseyjohnston/feed/';
  this.sel = typeof sel !== 'undefined' ? sel : '#alert';
  this.date = typeof date !== 'undefined' ? date : this.getYesterday();
}

AlertRSS.prototype.displayFeed = function() {
  var feed = new google.feeds.Feed(this.url);
  var that = this;
  feed.load(function(result) {
    if (!result.error) {
      for ( var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        console.log(that.sel + ' <h2><a href="' + entry.link + '">' + entry.title + '</a></h2><br  />');
        $(that.sel).append('<h2><a href="' + entry.link + '">' + entry.title + '</a></h2><br  />');
      }
    }
  });
};

Upvotes: 0

Views: 149

Answers (2)

Alex
Alex

Reputation: 512

Your function params ask for div not sel.

Upvotes: 1

Tomasz Nurkiewicz
Tomasz Nurkiewicz

Reputation: 340763

You are correctly creating tmp variable to capture this (note that typically it is called that in this context). You are even correctly using this reference here: tmp.sel. However you forgot to use it in line before that:

console.log(sel + ' <h2><a href="' + entry.link + '">' + entry.title + '</a></h2><br  />');

Change to:

console.log(tmp.sel + //...

and you'll be fine.

Upvotes: 1

Related Questions