194

I want to use jQuery to parse RSS feeds. Can this be done with the base jQuery library out of the box or will I need to use a plugin?

3

20 Answers 20

209

WARNING

The Google Feed API is officially deprecated and doesn't work anymore!


No need for a whole plugin. This will return your RSS as a JSON object to a callback function:

function parseRSS(url, callback) {
  $.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      callback(data.responseData.feed);
    }
  });
}
12
  • 4
    Tried jFeed and it didn't work, this works fine and doesn't require an extra library. Commented Aug 5, 2011 at 20:49
  • 17
    be aware... using the google api, the feeds are cached so you wont be getting the latest and greatest feeds.
    – c0deNinja
    Commented Sep 21, 2011 at 17:17
  • 3
    where is it cached? how can i remove cache?
    – Jeg Bagus
    Commented Sep 27, 2011 at 3:39
  • 42
    This is not a great answer. It is dependent on a third party company [Google] maintaining their service. It does not answer the original question ("Parse RSS with jQuery") and instead advertises Google. What if Google drops or modifies their ajax API? Your website breaks. Commented Jun 19, 2013 at 11:01
  • 12
    @CharlesGoodwin Google just removed this API! developers.google.com/feed/?hl=en
    – GôTô
    Commented Dec 2, 2015 at 10:50
185

Use jFeed - a jQuery RSS/Atom plugin. According to the docs, it's as simple as:

jQuery.getFeed({
   url: 'rss.xml',
   success: function(feed) {
      alert(feed.title);
   }
});
8
  • 2
    any examples of real world usage? ie parsing and displaying rather than alert. or is it as simple as $("#results").append(feed.title) Commented Oct 22, 2008 at 17:03
  • 3
    NOTE: the download has all kinds of great examples in it Commented Oct 22, 2008 at 17:06
  • 12
    Anirudha, perhaps you can try 7-zip? It's Free, open source, and opens a variety of file types, including tar/gzip. Commented Nov 9, 2009 at 15:30
  • 101
    Please note the latest version of this plugin is available on Github.
    – Alan H.
    Commented May 27, 2011 at 6:08
  • 4
    jFeed seems to be no longer actively maintained (the last change of note is 2 years old, and many open pull requests seem to be ignored), and does not work with recent releases of jQuery.
    – Thilo
    Commented Feb 5, 2013 at 9:48
162

For those of us coming to the discussion late, starting with 1.5 jQuery has built-in xml parsing capabilities, which makes it pretty easy to do this without plugins or 3rd party services. It has a parseXml function, and will also auto-parse xml when using the $.get function. E.g.:

$.get(rssurl, function(data) {
    var $xml = $(data);
    $xml.find("item").each(function() {
        var $this = $(this),
            item = {
                title: $this.find("title").text(),
                link: $this.find("link").text(),
                description: $this.find("description").text(),
                pubDate: $this.find("pubDate").text(),
                author: $this.find("author").text()
        }
        //Do something with item here...
    });
});
6
  • 10
    XmlHttpRequest error: Origin is not allowed by Access-Control-Allow-Origin
    – jackocnr
    Commented Aug 30, 2012 at 19:05
  • 13
    @jackocnr, yeah that's the downside of this method. You can't do cross-domain requests unless you have access to set the Access-Control-Allow-Origin header on the source server. If the server supports jsonp, then that is your best bet. Otherwise, you might use a proxy script within your domain to retrieve the xml and then call that script instead of the external server. Commented Aug 30, 2012 at 20:46
  • Is this really the only answer that doesn't rely on external plugins or services? Commented Mar 17, 2014 at 20:50
  • Why the $this.find("link").text() always returns empty string ''?
    – Jeff Tian
    Commented Oct 3, 2014 at 11:56
  • @JeffTian, hard to say without seeing your xml. The most obvious reason would be that the <link> element is missing or empty. Commented Oct 3, 2014 at 16:37
16

jFeed doesn't work in IE.

Use zRSSFeed. Had it working in 5 minutes

4
  • 2
    Available at zazar.net/developers/zrssfeed About to try it out myself to see how it goes, looks promising. Commented Jun 18, 2010 at 4:53
  • 3
    BTW, zRssFeed uses internally Google Feed RSS API. So if one wants to do the HTML layout itself it's easier to just look directly to that instead.
    – Ciantic
    Commented Apr 24, 2011 at 10:14
  • super cool... only thing is if they were providing the feed objects rather than the whole html in a callback function than that would be great...
    – shahil
    Commented Jan 1, 2014 at 5:46
  • 3
    FYI anyone looking to use this plugin. The developer posted the following. "THIS PLUGIN IS DISCONTINUED Due to the Google Feeds API being removed from service, which the plugin replied on, it will no longer be available or supported." Source: zazar.net/developers/jquery/zrssfeed
    – phanf
    Commented Dec 2, 2015 at 16:33
16

Update (Oct 15, 2019)

I extracted the core logic from jquery-rss to a new library called Vanilla RSS which is using the fetch API and can work without any additional dependencies:

const RSS = require('vanilla-rss');
const rss = new RSS(
    document.querySelector("#your-div"),
    "http://www.recruiter.com/feed/career.xml",
    { 
      // options go here
    }
);
rss.render().then(() => {
  console.log('Everything is loaded and rendered');
});

Original

post:

You can also use jquery-rss, which comes with nice templating and is super easy to use:

$("#your-div").rss("http://www.recruiter.com/feed/career.xml", {
    limit: 3,
    layoutTemplate: '<ul class="inline">{entries}</ul>',
    entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})

yields (as of Sept 18, 2013):

<div id="your-div">
    <ul class="inline">
    <entries></entries>
    </ul>
    <ul class="inline">
        <li><a href="http://www.recruiter.com/i/when-to-go-over-a-recruiter%e2%80%99s-head/">[@Tue, 10 Sep 2013 22:23:51 -0700] When to Go Over a Recruiter's Head</a><br>Job seekers tend to have a certain "fear" of recruiters and hiring managers, and I mean fear in the reverence and respect ...</li>
        <li><a href="http://www.recruiter.com/i/the-perfect-job/">[@Tue, 10 Sep 2013 14:52:40 -0700] The Perfect Job</a><br>Having long ago dealt with the "perfect resume" namely God's, in a previous article of mine, it makes sense to consider the ...</li>
        <li><a href="http://www.recruiter.com/i/unemployment-benefits-applications-remain-near-5-year-low-decline-again/">[@Mon, 09 Sep 2013 12:49:17 -0700] Unemployment Benefits Applications Remain Near 5-Year Low, Decline Again</a><br>As reported by the U.S. Department of Labor, the number of workers seeking unemployment benefits continued to sit near ...</li>
    </ul>
</div>

See http://jsfiddle.net/sdepold/ozq2dn9e/1/ for a working example.

6
  • Bear in mind that jquery-rss uses the Google Feed API which will cache the feed, which could present a problem. You can trick it by adding a junk url parameter though: stackoverflow.com/questions/13401936/…
    – kukabuka
    Commented May 2, 2015 at 0:36
  • please provide an example to format date without the use of moment.js Commented Nov 19, 2015 at 4:09
  • Check the following snippet gist.github.com/sdepold/d1e5e0e7a66fc77930fe It will generate something like this: "<some content>, [@2015-11-18]"
    – sdepold
    Commented Nov 20, 2015 at 5:29
  • Just wanted to mention that jquery-rss is NOT using the Google Feed API but a drop-in replacement called Feedr (github.com/sdepold/feedrapp) and respectively works fine despite the original API being turned off.
    – sdepold
    Commented Oct 15, 2019 at 7:00
  • Just want to mention that jquery-rss returns an error for me utilizing Feedr: "jquery-1.6.4.min.js:4 Mixed Content: The page at 'blah.com' was loaded over HTTPS, but requested an insecure script 'feedrapp.info/etcetcetc'..." I tried forcing "https:" in the script but it keeps throwing errors.
    – jimiayler
    Commented Dec 27, 2021 at 18:58
15

Using JFeed

function getFeed(sender, uri) {
    jQuery.getFeed({
        url: 'proxy.php?url=' + uri,
        success: function(feed) {
            jQuery(sender).append('<h2>'
            + '<a href="'
            + feed.link
            + '">'
            + feed.title
            + '</a>'
            + '</h2>');

            var html = '';

            for(var i = 0; i < feed.items.length && i < 5; i++) {

                var item = feed.items[i];

                html += '<h3>'
                + '<a href="'
                + item.link
                + '">'
                + item.title
                + '</a>'
                + '</h3>';

                html += '<div class="updated">'
                + item.updated
                + '</div>';

                html += '<div>'
                + item.description
                + '</div>';
            }

            jQuery(sender).append(html);
        }    
    });
}

<div id="getanewbrowser">
  <script type="text/javascript">
    getFeed($("#getanewbrowser"), 'http://feeds.feedburner.com/getanewbrowser')
  </script>
</div>
9

Use Google AJAX Feed API unless your RSS data is private. It's fast, of course.

https://developers.google.com/feed/

2
  • 1
    A good idea, but doesn't work when you're inside a firewall which requires proxy authentication using a dialogue box. Commented Jun 18, 2010 at 4:53
  • 1
    the google feed is deprecated and not supported any more. Commented Dec 29, 2017 at 7:31
8

UPDATE [4/25/2016] Now better written and fully supported version with more options and abilities hosted at GitHub.jQRSS

I saw the Selected Answer by Nathan Strutz, however, the jQuery Plugin page link is still down and the home page for that site did not seem to load. I tried a few other solutions and found most of them to be, not only out-dated, but EASY! Thus I threw my hat out there and made my own plugin, and with the dead links here, this seems like a great place to submit an answer. If you're looking for this answer in 2012 (soon to b 2013) you may notice the frustration of dead links and old advice here as I did. Below is a link to my modern plugin example as well as the code to the plugin! Simply copy the code into a JS file & link it in your header like any other plugin. Use is EXTREMELY EZ!

jsFiddle

Plugin Code
2/9/2015 - made long overdue update to check for console before sending commands to it! Should help with older IE issues.

(function($) {
    if (!$.jQRSS) { 
        $.extend({  
            jQRSS: function(rss, options, func) {
                if (arguments.length <= 0) return false;

                var str, obj, fun;
                for (i=0;i<arguments.length;i++) {
                    switch(typeof arguments[i]) {
                        case "string":
                            str = arguments[i];
                            break;
                        case "object":
                            obj = arguments[i];
                            break;
                        case "function":
                            fun = arguments[i];
                            break;
                    }
                }

                if (str == null || str == "") {
                    if (!obj['rss']) return false;
                    if (obj.rss == null || obj.rss == "") return false;
                }

                var o = $.extend(true, {}, $.jQRSS.defaults);

                if (typeof obj == "object") {
                    if ($.jQRSS.methods.getObjLength(obj) > 0) {
                        o = $.extend(true, o, obj);
                    }
                }

                if (str != "" && !o.rss) o.rss = str;
                o.rss = escape(o.rss);

                var gURL = $.jQRSS.props.gURL 
                    + $.jQRSS.props.type 
                    + "?v=" + $.jQRSS.props.ver
                    + "&q=" + o.rss
                    + "&callback=" + $.jQRSS.props.callback;

                var ajaxData = {
                        num: o.count,
                        output: o.output,
                    };

                if (o.historical) ajaxData.scoring = $.jQRSS.props.scoring;
                if (o.userip != null) ajaxData.scoring = o.userip;

                $.ajax({
                    url: gURL,
                    beforeSend: function (jqXHR, settings) { if (window['console']) { console.log(new Array(30).join('-'), "REQUESTING RSS XML", new Array(30).join('-')); console.log({ ajaxData: ajaxData, ajaxRequest: settings.url, jqXHR: jqXHR, settings: settings, options: o }); console.log(new Array(80).join('-')); } },
                    dataType: o.output != "xml" ? "json" : "xml",
                    data: ajaxData,
                    type: "GET",
                    xhrFields: { withCredentials: true },
                    error: function (jqXHR, textStatus, errorThrown) { return new Array("ERROR", { jqXHR: jqXHR, textStatus: textStatus, errorThrown: errorThrown } ); },
                    success: function (data, textStatus, jqXHR) {  
                        var f = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : null : null,
                            e = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed['entries'] ? data.responseData.feed.entries : null : null : null
                        if (window['console']) {
                            console.log(new Array(30).join('-'), "SUCCESS", new Array(30).join('-'));
                            console.log({ data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e });
                            console.log(new Array(70).join('-'));
                        }

                        if (fun) {
                            return fun.call(this, data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : data.responseData : null);
                        }
                        else {
                            return { data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e };
                        }
                    }
                });
            }
        });
        $.jQRSS.props = {
            callback: "?",
            gURL: "http://ajax.googleapis.com/ajax/services/feed/",
            scoring: "h",
            type: "load",
            ver: "1.0"
        };
        $.jQRSS.methods = {
            getObjLength: function(obj) {
                if (typeof obj != "object") return -1;
                var objLength = 0;
                $.each(obj, function(k, v) { objLength++; })
                return objLength;
            }
        };
        $.jQRSS.defaults = {
            count: "10", // max 100, -1 defaults 100
            historical: false,
            output: "json", // json, json_xml, xml
            rss: null,  //  url OR search term like "Official Google Blog"
            userip: null
        };
    }
})(jQuery);

USE

//  Param ORDER does not matter, however, you must have a link and a callback function
//  link can be passed as "rss" in options
//  $.jQRSS(linkORsearchString, callbackFunction, { options })

$.jQRSS('someUrl.xml', function(feed) { /* do work */ })

$.jQRSS(function(feed) { /* do work */ }, 'someUrl.xml', { count: 20 })

$.jQRSS('someUrl.xml', function(feed) { /* do work */ }, { count: 20 })

$.jQRSS({ count: 20, rss: 'someLink.xml' }, function(feed) { /* do work */ })

$.jQRSS('Search Words Here instead of a Link', function(feed) { /* do work */ }) // TODO: Needs fixing

Options

{
    count: // default is 10; max is 100. Setting to -1 defaults to 100
    historical: // default is false; a value of true instructs the system to return any additional historical entries that it might have in its cache. 
    output: // default is "json"; "json_xml" retuns json object with xmlString / "xml" returns the XML as String
    rss: // simply an alternate place to put news feed link or search terms
    userip: // as this uses Google API, I'll simply insert there comment on this:
        /*  Reference: https://developers.google.com/feed/v1/jsondevguide
            This argument supplies the IP address of the end-user on 
            whose behalf the request is being made. Google is less 
            likely to mistake requests for abuse when they include 
            userip. In choosing to utilize this parameter, please be 
            sure that you're in compliance with any local laws, 
            including any laws relating to disclosure of personal 
            information being sent.
        */
}
0
5
(function(url, callback) {
    jQuery.ajax({
        url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
        dataType: 'json',
        success: function(data) {
            callback(data.responseData.feed);
        }
    });
})('http://news.hitb.org/rss.xml', function(feed){ // Change to desired URL
    var entries = feed.entries, feedList = '';
    for (var i = 0; i < entries.length; i++) {
        feedList +='<li><a href="' + entries[i].link + '">' + entries[i].title + '</a></li>';
    }
    jQuery('.feed > ul').append(feedList);
});


<div class="feed">
        <h4>Hacker News</h4>
        <ul></ul>
</div>
5

I agree with @Andrew, using Google is a solid, reusable way to do it with the huge benefit that you get JSON back instead of XML. An added advantage of using Google as a proxy is that services that might block your direct access to their data are unlikely to stop Google. Here is an example using ski report and conditions data. This has all of the common real world applications: 1) Third party RSS/XML 2) JSONP 3) Cleaning strings and string to array when you can't get the data exactly the way you want it 4) on load add elements to the DOM. Hope this helps some people!

<!-- Load RSS Through Google as JSON using jQuery -->
<script type="text/javascript">

    function displaySkiReport (feedResponse) {

    // Get ski report content strings
    var itemString = feedResponse.entries[0].content;
    var publishedDate = feedResponse.entries[0].publishedDate;

    // Clean up strings manually as needed
    itemString = itemString.replace("Primary: N/A", "Early Season Conditions"); 
    publishedDate = publishedDate.substring(0,17);

    // Parse ski report data from string
    var itemsArray = itemString.split("/");


    //Build Unordered List
    var html = '<h2>' + feedResponse.entries[0].title + '</h2>';
    html += '<ul>';

    html += '<li>Skiing Status: ' + itemsArray[0] + '</li>';
    // Last 48 Hours
    html += '<li>' + itemsArray[1] + '</li>';
    // Snow condition
    html += '<li>' + itemsArray[2] + '</li>';
    // Base depth
    html += '<li>' + itemsArray[3] + '</li>';

    html += '<li>Ski Report Date: ' + publishedDate + '</li>';

    html += '</ul>';

    $('body').append(html);    

    }


    function parseRSS(url, callback) {
      $.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      callback(data.responseData.feed);
    }
      });
    }

    $(document).ready(function() {              

        // Ski report
        parseRSS("http://www.onthesnow.com/michigan/boyne-highlands/snow.rss", displaySkiReport);

    });

</script>
3
  • 2
    This is not going to work because of cross-domain issues. You need JSONP.
    – gotofritz
    Commented Aug 29, 2012 at 23:47
  • 1
    It works for me. Did you test it? Pretty sure Google returns jsonp using the callback parameter not ajax dataType. Commented Sep 5, 2012 at 1:26
  • Not sure what the downvote was for. This code still works three years later. Paste it all into the console and you'll see current (XML) ski conditions added to the footer of this page. Commented May 6, 2016 at 14:19
4

jFeed is somewhat obsolete, working only with older versions of jQuery. It has been two years since it was updated.

zRSSFeed is perhaps a little less flexible, but it is easy to use, and it works with the current version of jQuery (currently 1.4). http://www.zazar.net/developers/zrssfeed/

Here's a quick example from the zRSSFeed docs:

<div id="test"><div>

<script type="text/javascript">
$(document).ready(function () {
  $('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
    limit: 5
  });
});
</script>
1
  • Might note this only works with non-local feeds, since it uses the Google Feed API (Google must be able to load the feed xml).
    – CmdrTallen
    Commented Mar 18, 2011 at 15:19
2

I'm using jquery with yql for feed. You can retrieve twitter,rss,buzz with yql. I read from http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/ . It's very useful for me.

2
<script type="text/javascript" src="./js/jquery/jquery.js"></script>
<script type="text/javascript" src="./js/jFeed/build/dist/jquery.jfeed.pack.js"></script>
<script type="text/javascript">
    function loadFeed(){
        $.getFeed({
            url: 'url=http://sports.espn.go.com/espn/rss/news/',
            success: function(feed) {

                //Title
                $('#result').append('<h2><a href="' + feed.link + '">' + feed.title + '</a>' + '</h2>');

                //Unordered List
                var html = '<ul>';

                $(feed.items).each(function(){
                    var $item = $(this);

                    //trace( $item.attr("link") );
                    html += '<li>' +
                        '<h3><a href ="' + $item.attr("link") + '" target="_new">' +
                        $item.attr("title") + '</a></h3> ' +
                        '<p>' + $item.attr("description") + '</p>' +
                        // '<p>' + $item.attr("c:date") + '</p>' +
                        '</li>';
                });

                html += '</ul>';

                $('#result').append(html);
            }
        });
    }
</script>
1
  • Not a bad answer, but unfortunately you didn't do the greatest job pasting the code. ;-)
    – Till
    Commented Sep 2, 2010 at 12:12
2

I advice you to use FeedEk. After Google Feed API is officially deprecated most of plugins doesn't work. But FeedEk is still working. It's very easy to use and has many options to customize.

$('#divRss').FeedEk({
   FeedUrl:'http://jquery-plugins.net/rss'
});

With options

$('#divRss').FeedEk({
  FeedUrl:'http://jquery-plugins.net/rss',
  MaxCount : 5,
  ShowDesc : true,
  ShowPubDate:true,
  DescCharacterLimit:100,
  TitleLinkTarget:'_blank',
  DateFormat: 'MM/DD/YYYY',
  DateFormatLang:'en'
});
2
  • I'm not sure if you can actually define an alternative api endpoint, but if you could, there would potentially be the possibility to replace the google feed api with feedrapp: github.com/sdepold/feedrapp (which is also the backbone for jquery-rss nowadays)
    – sdepold
    Commented Dec 15, 2015 at 6:29
  • This does not do parsing. It uses yahooapis to do the parsing, then it just displays the content.
    – David L.
    Commented Jan 3, 2016 at 20:57
0

Use google ajax api, cached by google and any output format you want.

Code sample; http://code.google.com/apis/ajax/playground/#load_feed

<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
/*
*  How to load a feed via the Feeds API.
*/

google.load("feeds", "1");

// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
  if (!result.error) {
    // Grab the container we will put the results into
    var container = document.getElementById("content");
    container.innerHTML = '';

    // Loop through the feeds, putting the titles onto the page.
    // Check out the result object for a list of properties returned in each entry.
    // http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
    for (var i = 0; i < result.feed.entries.length; i++) {
      var entry = result.feed.entries[i];
      var div = document.createElement("div");
      div.appendChild(document.createTextNode(entry.title));
      container.appendChild(div);
    }
  }
}

function OnLoad() {
  // Create a feed instance that will grab Digg's feed.
  var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");

  // Calling load sends the request off.  It requires a callback function.
  feed.load(feedLoaded);
}

google.setOnLoadCallback(OnLoad);
</script>
1
  • this is a great option because it doesn't rely on jquery! Commented Nov 11, 2013 at 17:42
0

zRSSfeed is built on jQuery and the simple theme is awesome.
Give it a try.

0

The jQuery-rss project is pretty lightweight and doesn't impose any particular styling.

The syntax can be as simple as

$("#rss-feeds").rss("http://www.recruiter.com/feed/career.xml")

See a working example at http://jsfiddle.net/jhfrench/AFHfn/

-1

jQuery Feeds is a nice option, it has a built-in templating system and uses the Google Feed API, so it has cross-domain support.

-1

Superfeedr has a jquery plugin which does that very well. You won't have any Cross Origin Policy issue and the updates are propagated in realtime.

1
  • Why would this solution not have CORS issues?
    – drewish
    Commented Apr 30, 2016 at 23:36
-2

jFeed is easy and has an example for you to test. But if you're parsing a feed from another server, you'll need to allow Cross Origin Resource Sharing (CORS) on the feed's server. You'll also need to check browser support.

I uploaded the sample but still did not get support from IE in any version when I changed the url in the example to something like example.com/feed.rss via the http protocol. CORS should be supported for IE 8 and above but the jFeed example did not render the feed.

Your best bet is to use Google's API:
https://developers.google.com/feed/v1/devguide

See:
https://github.com/jfhovinne/jFeed
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://en.wikipedia.org/wiki/Same_origin_policy
http://caniuse.com/cors

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.