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?
-
1I would go for github.com/sdepold/jquery-rss — it's the best option right now, multiple options available! :)– KomrathCommented 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.– Adam NaylorCommented Nov 6, 2012 at 13:13
-
github.com/sdepold/jquery-rss– BlazemongerCommented May 6, 2015 at 18:15
20 Answers
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);
}
});
}
-
4Tried jFeed and it didn't work, this works fine and doesn't require an extra library. Commented Aug 5, 2011 at 20:49
-
17be aware... using the google api, the feeds are cached so you wont be getting the latest and greatest feeds. Commented Sep 21, 2011 at 17:17
-
3
-
42This 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
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);
}
});
-
2any 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
-
3NOTE: the download has all kinds of great examples in it Commented Oct 22, 2008 at 17:06
-
12Anirudha, 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
-
4jFeed 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.– ThiloCommented Feb 5, 2013 at 9:48
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...
});
});
-
10XmlHttpRequest error: Origin is not allowed by Access-Control-Allow-Origin– jackocnrCommented 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 ''? 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
jFeed doesn't work in IE.
Use zRSSFeed. Had it working in 5 minutes
-
2Available 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
-
3BTW, 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.– CianticCommented 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...– shahilCommented Jan 1, 2014 at 5:46
-
3FYI 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– phanfCommented Dec 2, 2015 at 16:33
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.
-
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/…– kukabukaCommented 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]"– sdepoldCommented 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.– sdepoldCommented 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. Commented Dec 27, 2021 at 18:58
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>
Use Google AJAX Feed API unless your RSS data is private. It's fast, of course.
-
1A 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
-
1the google feed is deprecated and not supported any more. Commented Dec 29, 2017 at 7:31
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!
Plugin Code
2/9/2015 - made long overdue update to check forconsole
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.
*/
}
(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>
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>
-
2This is not going to work because of cross-domain issues. You need JSONP. Commented Aug 29, 2012 at 23:47
-
1It 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
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>
-
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). Commented Mar 18, 2011 at 15:19
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.
<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>
-
Not a bad answer, but unfortunately you didn't do the greatest job pasting the code. ;-)– TillCommented Sep 2, 2010 at 12:12
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'
});
-
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)– sdepoldCommented 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
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>
-
this is a great option because it doesn't rely on jquery! Commented Nov 11, 2013 at 17:42
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/
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.
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.
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