Geek Answers Handbook

Reading RSS feed using jQuery - unable to read <link> element

I am creating an RSS feed for my site using jquery and the link element continues to return empty. I have no problem with the javascript solution I built myself, but jquery seems to hate the link element.

below is the jquery code:

function loadData(xml, ifid) { var htmlStr; var iframeToWrite = document.getElementById(ifid); htmlStr = "<html><body>" var items = $(xml).find("channel item").each(function () { var $article = $(this); var title = $article.find("title").text(); var description = $article.find("description").text(); var link = $article.find("link").text(); var pubDate = $article.find("pubDate").text(); htmlStr += "<div class='Rssitem'>\n"; htmlStr += "\t<h3><a href='" + link + "' target='_blank' >" + title + "</a></h3>\n"; htmlStr += "\t<p>" + description + "</p>\n"; htmlStr += "\t<h6>" + pubDate + "</h6>\n"; htmlStr += "</div>\n" }); htmlStr += "</body></hmtl>"; iframeToWrite.contentDocument.write(htmlStr); }

below is the xml i sample edited from the npr stream that I get:

 <?xml version="1.0" encoding="UTF-8"?> <rss xmlns:npr="http://www.npr.org/rss/" xmlns:nprml="http://api.npr.org/nprml" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0"> <channel> <title>News</title> <link>http://www.npr.org/templates/story/story.php?storyId=1001&amp;ft=1&amp;f=1001</link> <description>NPR news, audio, and podcasts. Coverage of breaking stories, national and world news, politics, business, science, technology, and extended coverage of major national and world events.</description> <language>en</language> <copyright>Copyright 2012 NPR - For Personal Use Only</copyright> <generator>NPR API RSS Generator 0.94</generator> <lastBuildDate>Tue, 28 Aug 2012 12:19:00 -0400</lastBuildDate> <image> <url>http://media.npr.org/images/npr_news_123x20.gif</url> <title>News</title> <link>http://www.npr.org/templates/story/story.php?storyId=1001&amp;ft=1&amp;f=1001</link> </image> <item> <title>Reports: Obama Administration Will Unveil New Fuel-Efficiency Standards</title> <description>The new rules will require US cars to average 54.5 miles per gallon by 2025.</description> <pubDate>Tue, 28 Aug 2012 12:19:00 -0400</pubDate> <link>http://www.npr.org/blogs/thetwo-way/2012/08/28/160172356/reports-obama-administration-will-unveil-new-fuel-efficiency-standards?ft=1&amp;f=1001</link> <guid>http://www.npr.org/blogs/thetwo-way/2012/08/28/160172356/reports-obama-administration-will-unveil-new-fuel-efficiency-standards?ft=1&amp;f=1001</guid> <content:encoded><![CDATA[<p>The new rules will require US cars to average 54.5 miles per gallon by 2025.</p><p><a href="http://www.npr.org/templates/email/emailAFriend.php?storyId=160172356">&raquo; E-Mail This</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://del.icio.us/post?url=http%3A%2F%2Fwww.npr.org%2Ftemplates%2Fstory%2Fstory.php%3FstoryId%3D160172356">&raquo; Add to Del.icio.us</a></p>]]></content:encoded> </item> </channel> </rss>
+4
source share
1 answer

You must first parse the xml string in the jQuery.parseXML () XML document.
To quote the documentation:

jQuery.parseXML uses its own browser parsing function to create a valid XML document. You can then pass this document to jQuery to create a typical jQuery object that can be traversed and manipulated.

If you do not use parseXML and do not include the jQuery selector in it, jQuery may not be able to correctly interpret all nodes.

In your example, the <link> tags were not entered correctly and the closing </link> tags were removed indiscriminately, so you cannot request the link text correctly.
You can confirm that if you execute console.log($(this)) and check the contents on the console output. You can see the text <link> then, but the closing </link> missing.

However, when parsing xml first on a document object, you can now wrap a jQuery selector around it and reliably access all nodes. Of course, assuming the inital XML string was valid XML.

DEMO - Using parseXml in your xml string and requesting it after

Using this code will look something like this:

 htmlStr = "<html><body>"; // Parse the XML to a document object and then wrap it into a jQuery selector var $xml = $($.parseXML(xml)); var items = $xml.find("channel item").each(function() { var $article = $(this); //..... rest of your code as is
+3
source

More articles:


All Articles