Reading RSS with jQuery

Posted in software by Christopher R. Wirz on Sun Aug 14 2011

RSS (Really Simple Syndication) is a web feed which allows users and applications to access updates to websites in a standardized format.


<?xml version="1.0" encoding="ISO-8859-1"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/">
    <channel>
        <atom:link href="https://www.chriswirz.com/rss.xml" rel="self" type="application/rss+xml" />
        <title>Chris Wirz's Blog</title>
        <description>A mix of technology, management, and venture.</description>
        <link>https://www.chriswirz.com/</link>
        <category domain="chriswirz.com">Software/Management</category>
        <copyright>Copyright 2011 ChrisWirz.com</copyright>
        <docs>https://www.chriswirz.com/rss</docs>
        <language>en-us</language>
        <lastBuildDate>Fri Feb 11 2011 10:35:41 GMT+0000 (UTC)</lastBuildDate>
        <managingEditor>chris@chriswirz.com (Christopher R. Wirz)</managingEditor>
        <pubDate>Fri Feb 11 2011 10:35:41 GMT+0000 (UTC)</pubDate>
        <webMaster>chris@chriswirz.com (Christopher R. Wirz)</webMaster>
        <generator>chriswirz.com</generator>

RSS solves a problem for people who regularly use the web. It allows you to easily stay informed by retrieving the latest content from the sites you are interested in.

jQuery is a JavaScript library, beginning in 2005, designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. How do you read RSS feed using jQuery?


var request = $.ajax({
	url: "https://www.chriswirz.com/rss.xml",
	dataType: 'xml',
	processData: false,
	type: "GET",
	crossDomain: true
});
request.done(function(xml)
{
	$("#feed").html("");
	$("#FeedTitle").text($(xml).find('title').first().text());
	var image = $(xml).find('image').first().find('url').first().text();
	$("#FeedThumb").attr('src', image);
	$("#FeedTitle").css("font-size","32px");
	$(xml).find('item').each(function(index,element){
		var responseHTML = "<div class=\"itemPanelContent\">\r\n";
		var img = $(element).find("content").first().attr('url');
		if (typeof(img) == 'undefined' || (img+"")=="")
		{
			img = $(element).find("media:content").first().attr('url');
		}
		if (typeof(img) == 'undefined' || (img+"")=="" && typeof(element.children)=="object")
		{
			for (var i in element.children){
				var e = element.children[i];
				if (typeof(e.tagName)=="string" && (e.tagName == "media:content" || e.tagName == "content")) {
					img = $(e).attr("url");
				}
			}
		}
		if (typeof(img) != 'undefined' && (img+"")!="")
		{
			responseHTML += "<div class=\"itemImageContainer\">\r\n";
			responseHTML += "<img src=\"" + img + "\">\r\n";
			responseHTML += "</div><!-- end .itemImageContainer -->\r\n";
		}
		var title = $(element).find('title').first().text();
		if (typeof(title) != 'undefined' && (title + "") != "")
		{
			responseHTML += "<h2>" + title + "</h2>";
		}
		var description =$(element).find('description').first().text();
		if (typeof(description) != 'undefined' && (description + "") != "")
		{
			responseHTML += "<p>" + description + "</p>";
		}
		responseHTML += "<div style=\"clear: both;\"></div>\r\n";
		responseHTML += "</div><!-- end .itemPanelContent -->";
		responseHTML += "<div style=\"clear: both;\"></div>\r\n";
		$("#feed").html($("#feed").html() + "<a href=\"" + $(element).find('link').first().text() + "\" class=\"itemPanel\">" + responseHTML + "</a><!-- end .itemContainer -->\r\n");
	}).promise().done(function(){


	});
});

Easy enough... Let's try it