从JavaScript对象的数组成员变量访问数据

Question

我正在编写一个jQuery插件，用于使用Google的Feed API提取RSS提要数据。使用此API，我将所有相关的RSS提要数据保存到对象中，然后通过方法对其进行操作。我有一个函数，它应该将RSS提要呈现到网页上。不幸的是，当我尝试显示单个RSS提要条目时，我收到错误。这是我的相关代码：

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'));

显然，我的display()功能尚未完成，但它是一个很好的例子。第一个console.log()会将所有相关数据写入控制台，包括entries数组。但是，当我尝试自己记录entries数组时，它返回一个空数组。知道为什么会这样吗？

Answer 1

我猜问题是在不等待AJAX​​请求完成的情况下调用display()。因此，当您已尝试访问entries时，请求仍在运行 - 因此是空数组。

为了解决此问题，您可以将display()的呼叫转移到$.getJSON()的回调中。您只需将所需的选择器添加为参数：

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

<小时/> 修改

如果你不想将display()移到回调中，你可以尝试这样的事情（未经测试！）：

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 {
            ...
        }
    };
};