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

Accessing Data from JavaScript Object's Array Member Variable

本文关键字：数组 组成员 变量 JavaScript 对象 访问 数据      更新时间：2024-06-13

我正在编写一个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数组时，它返回的是一个空数组。知道为什么吗？

我想问题是display()在没有等待AJAX请求完成的情况下被调用。因此，当您已经尝试访问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 {
            ...
        }
    };
};
相关文章：