Appending content from RSS feeds to separate divs

Question

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")
});

guest271314 · Accepted Answer · 2016-04-11T17:46:55.820

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.

edited Apr 11 '16 at 17:46

answered Apr 11 '16 at 17:32

guest271314

1
15
104
177

1

@AdityaVikasDevarapalli You are not returning a promise from `RSSWidget`. Try including `return $.ajax(/* settings */)` within `RSSWidget` – guest271314 Apr 11 '16 at 17:36
yeah !... It worked... Thanks a lot... So could you please elaborate on my mistake ? – Aditya Vikas Devarapalli Apr 11 '16 at 17:38
Now I added another div with some other RSS feed and I used `.then(function() { RSSWidget('rss3', "http://finance.yahoo.com/rss/topfinstories") })`. But now I get the same problem again.. What to do ? – Aditya Vikas Devarapalli Apr 11 '16 at 18:35
What did you do different from _"yeah !... It worked.."_ version? Can you create a jsfiddle to demonstrate? Note that at https://jsfiddle.net/54vzrbd8/ there was a `400` error at `console` – guest271314 Apr 11 '16 at 18:44
finally... resolved it with `$.when(RSSWidget('rss1', "http://rss.cnn.com/rss/money_markets.rss")) .then(function () { $.when(RSSWidget('rss2', "http://feeds.reuters.com/reuters/financialsNews")).then(function () { RSSWidget('rss3', "http://finance.yahoo.com/rss/topfinstories") }) });' – Aditya Vikas Devarapalli Apr 11 '16 at 18:45
1

Try substituting `return RSSWidget('rss2', "feeds.reuters.com/reuters/financialsNews")` for passing as parameter to `$.when()` ; curious if returns same results? – guest271314 Apr 11 '16 at 18:57
yeah man,.... you're a pro... it returns the same result... However hard I try....I feel this Javascript unfathomable – Aditya Vikas Devarapalli Apr 11 '16 at 19:04
I wish I could upvote 10 times... :P ... You saved me a lot of time... I've been working on this for hours – Aditya Vikas Devarapalli Apr 11 '16 at 19:05

Appending content from RSS feeds to separate divs

1 Answers1