CODEWITHSUNDEEP
javascriptjqueryajaxrss
Aditya Vikas Devarapalli
Aditya Vikas Devarapalli

Reputation: 3473

Appending content from RSS feeds to separate divs

I'm trying to display RSS using the following JS code. But when I execute this, both the RSS feeds are changed to same content (the one that is execute later) and all the feeds are appended to the same div. I think rss = this is causing the problem. Any workaround ?

HTML:

<div id="rss1" class="rss-widget">
        <ul></ul>
</div>
<div id="rss2" class="rss-widget">
        <ul></ul>
</div>
<div id="rss3" class="rss-widget">
        <ul></ul>
</div>

JS:

function RSSWidget(id, url) {

rss = this;
rss.FEED_URL = url;

rss.JSON = new Array();
rss.widgetHolder = $('#' + id + ' ul ');
rss.storiesLimit = 15;

rss.renderBlogItem = function (object) {
    var item = '<li class="blog-item">';
    item += '<a href="' + object.link + '">';
    item += '<div class="blog-item-title">' + object.title + '</div>';
    item += '<div class="blog-item-author">' + object.author + '</div>';
    // item += '<div class="blog-item-content">' + object.content + '</div>';
    item += '</a>'
    item += '</li>';

    rss.widgetHolder.append(item);
}

return $.ajax({
    url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(rss.FEED_URL),
    dataType: 'json',
    success: function (data) {
        if (data.responseData.feed && data.responseData.feed.entries) {
            $.each(data.responseData.feed.entries, function (i, e) {
                rss.JSON.push({ //add objects to the array
                    title: e.title,
                    author: e.author,
                    content: e.content || "",
                    link: e.link
                });
            });

            if (rss.storiesLimit > rss.JSON.length)
                rss.storiesLimit = rss.JSON.length;

            for (var i = 0; i < rss.storiesLimit; i++) {
                rss.renderBlogItem(rss.JSON[i]);
            }

            $('#' + id + ' li ').each(function () {
                var delay = ($(this).index() / rss.storiesLimit) + 's';
                $(this).css({
                    webkitAnimationDelay: delay,
                    mozAnimationDelay: delay,
                    animationDelay: delay
                });
            });

        }
    }
});

}

$.when(RSSWidget('rss1', "http://rss.cnn.com/rss/money_markets.rss"))
.then(function () {
    RSSWidget('rss2', "http://feeds.reuters.com/reuters/financialsNews")
})
.then(function () {
    RSSWidget('rss3', "http://finance.yahoo.com/rss/topfinstories")
});

Upvotes: 0

Views: 215

Answers (1)

guest271314
guest271314

Reputation: 1

.then(RSSWidget('rss2', "http://feeds.reuters.com/reuters/financialsNews"));

is immediately invoked. Try calling second RSSWidget within .then() anonymous function

.then(function() {
  RSSWidget('rss2', "http://feeds.reuters.com/reuters/financialsNews")
})

Also, no promise is returned from RSSWidget; you can include return $.ajax(/* settings */) from RSSWidget to return the jQuery promise object from RSSWidget.

Upvotes: 1

Related Questions