Question

I’m writing a jQuery plugin for work which pulls in RSS feed data using Google’s Feed API. Using this API, I’m saving all of the relevant RSS feed data into an object, then manipulating it through methods. I have a function which is supposed to render the RSS feed onto the webpage. Unfortunately, when I try to display the individual RSS feed entries, I get an error. Here’s my relevant code:

var RSSFeed = function(feedTitle, feedUrl, options) {
/*
 * An object to encapsulate a Google Feed API request.
 */

// Variables
this.description = "";
this.entries = [];
this.feedUrl = feedUrl;
this.link = "";
this.title = feedTitle;
this.options = $.extend({
    ssl : true,
    limit : 4,
    key : null,
    feedTemplate : '<article class="rss-feed"><h2>{title}</h1><ul>{entries}</ul></article>',
    entryTemplate : '<li><h3><a href="{link}">{title}</a></h3><p>by: {author} @ {publishedDate}</p><p>{contentSnippet}</p></li>',
    outputMode : "json"
}, options || {});

this.sendFeedRequest = function() {
    /*
     * Makes the AJAX call to the provided requestUrl
     */

    var self = this;
    $.getJSON(this.encodeRequest(), function(data) {
        // Save the data in a temporary object
        var responseDataFeed = data.responseData.feed;

        // Now load the data into the RSSFeed object
        self.description = responseDataFeed.description;
        self.link = responseDataFeed.link;
        self.entries = responseDataFeed.entries;
    });
};

this.display = function(jQuerySelector) {
    /*
     * Displays the RSSFeed onto the webpage
     * Each RSSEntry will be displayed wrapped in the RSSFeed's template HTML
     * The template markup can be specified in the options
     */

    var self = this;
    console.log(self);
    console.log(self.entries);
};
};

$.rssObj = function(newTitle, newUrl, options) {
    return new RSSFeed(newTitle, newUrl, options);
};

// Code to call the jquery plugin, would normally be found in an index.html file
rss = $.rssObj("Gizmodo", "http://feeds.gawker.com/Gizmodo/full");
rss.sendFeedRequest();

rss.display($('div#feed'));

Obviously, my display() function isn’t complete yet, but it serves as a good example. The first console.log() will write all of the relevant data to the console, including the entries array. However, when I try to log the entries array by itself, it’s returning an empty array. Any idea why that is?

Answer 1

I guess the problem is that display() is called without waiting for the AJAX request to complete. So the request is still running while you already try to access entries – hence the empty array.

In order to solve this you could move the call to display() into the callback of $.getJSON(). You just have to add the required selector as a parameter:

this.sendFeedRequest = function(selector) {
    var self = this;
    $.getJSON(this.encodeRequest(), function(data) {
        var responseDataFeed = data.responseData.feed;
        ...
        self.entries = responseDataFeed.entries;
        self.display(selector);
    });
};

---

EDIT:

If you don’t want to move display() into the callback, you could try something like this (untested!):

var RSSFeed = function(feedTitle, feedUrl, options) {
    ...
    this.loading = false;
    this.selector = null;

    this.sendFeedRequest = function() {
        var self = this;
        self.loading = true;
        $.getJSON(this.encodeRequest(), function(data) {
            ...
            self.loading = false;
            if (self.selector != null) {
                self.display(self.selector);
            }
        });
    };

    this.display = function(jQuerySelector) {
        var self = this;
        if (self.loading) {
            self.selector = jQuerySelector;
        }
        else {
            ...
        }
    };
};