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
  • 1
    I would go for github.com/sdepold/jquery-rss — it's the best option right now, multiple options available! :) Commented Feb 13, 2012 at 11:23
  • For anyone landing here from google I had to create a similar thing for a deviantART thumbnail viewer. Nice and simple and easily extendible: adamjamesnaylor.com/2012/11/05/…. Note it makes use of google's feed reader, but only to convert it into JSON. Commented Nov 6, 2012 at 13:13
  • github.com/sdepold/jquery-rss Commented May 6, 2015 at 18:15

20 Answers 20

208

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);
    }
  });
}
Sign up to request clarification or add additional context in comments.

12 Comments

Tried jFeed and it didn't work, this works fine and doesn't require an extra library.
be aware... using the google api, the feeds are cached so you wont be getting the latest and greatest feeds.
where is it cached? how can i remove cache?
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.
@CharlesGoodwin Google just removed this API! developers.google.com/feed/?hl=en
|
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 Comments

any examples of real world usage? ie parsing and displaying rather than alert. or is it as simple as $("#results").append(feed.title)
NOTE: the download has all kinds of great examples in it
Anirudha, perhaps you can try 7-zip? It's Free, open source, and opens a variety of file types, including tar/gzip.
Please note the latest version of this plugin is available on Github.
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.
|
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 Comments

XmlHttpRequest error: Origin is not allowed by Access-Control-Allow-Origin
@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.
Is this really the only answer that doesn't rely on external plugins or services?
Why the $this.find("link").text() always returns empty string ''?
@JeffTian, hard to say without seeing your xml. The most obvious reason would be that the <link> element is missing or empty.
|
16

jFeed doesn't work in IE.

Use zRSSFeed. Had it working in 5 minutes

4 Comments

Available at zazar.net/developers/zrssfeed About to try it out myself to see how it goes, looks promising.
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.
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...
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
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 Comments

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/…
please provide an example to format date without the use of moment.js
Check the following snippet gist.github.com/sdepold/d1e5e0e7a66fc77930fe It will generate something like this: "<some content>, [@2015-11-18]"
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.
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.
|
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>

Comments

9

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

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

2 Comments

A good idea, but doesn't work when you're inside a firewall which requires proxy authentication using a dialogue box.
the google feed is deprecated and not supported any more.
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.
        */
}

Comments

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>

Comments

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 Comments

This is not going to work because of cross-domain issues. You need JSONP.
It works for me. Did you test it? Pretty sure Google returns jsonp using the callback parameter not ajax dataType.
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.
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 Comment

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).
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.

Comments

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 Comment

Not a bad answer, but unfortunately you didn't do the greatest job pasting the code. ;-)
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 Comments

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)
This does not do parsing. It uses yahooapis to do the parsing, then it just displays the content.
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 Comment

this is a great option because it doesn't rely on jquery!
0

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

Comments

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/

Comments

-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.

Comments

-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 Comment

Why would this solution not have CORS issues?
-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

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.