76
rated 0 times
[
79]
[
3]
/ answers: 1 / hits: 191283
/ 12 Years ago, fri, june 8, 2012, 12:00:00
I need to parse an RSS feed (XML version 2.0) and display the parsed details in an HTML page.
More From » html
Answers
29
Parsing the Feed
With jQuery's jFeed
(Don't really recommend that one, see the other options.)
jQuery.getFeed({
url : FEED_URL,
success : function (feed) {
console.log(feed.title);
// do more stuff here
}
});
With jQuery's Built-in XML Support
$.get(FEED_URL, function (data) {
$(data).find(entry).each(function () { // or item or whatever suits your feed
var el = $(this);
console.log(------------------------);
console.log(title : + el.find(title).text());
console.log(author : + el.find(author).text());
console.log(description: + el.find(description).text());
});
});
With jQuery and the Google AJAX Feed API
$.ajax({
url : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(FEED_URL),
dataType : 'json',
success : function (data) {
if (data.responseData.feed && data.responseData.feed.entries) {
$.each(data.responseData.feed.entries, function (i, e) {
console.log(------------------------);
console.log(title : + e.title);
console.log(author : + e.author);
console.log(description: + e.description);
});
}
}
});
But that means you're relient on them being online and reachable.
Building Content
Once you've successfully extracted the information you need from the feed, you could create DocumentFragments (with document.createDocumentFragment() containing the elements (created with document.createElement()) you'll want to inject to display your data.
Injecting the content
Select the container element that you want on the page and append your document fragments to it, and simply use innerHTML to replace its content entirely.
Something like:
$('#rss-viewer').append(aDocumentFragmentEntry);
or:
$('#rss-viewer')[0].innerHTML = aDocumentFragmentOfAllEntries.innerHTML;
Test Data
Using this question's feed, which as of this writing gives:
<?xml version=1.0 encoding=utf-8?>
<feed xmlns=http://www.w3.org/2005/Atom xmlns:creativeCommons=http://backend.userland.com/creativeCommonsRssModule xmlns:re=http://purl.org/atompub/rank/1.0>
<title type=text>How to parse a RSS feed using javascript? - Stack Overflow</title>
<link rel=self href=https://stackoverflow.com/feeds/question/10943544 type=application/atom+xml />
<link rel=hub href=http://pubsubhubbub.appspot.com/ />
<link rel=alternate href=https://stackoverflow.com/q/10943544 type=text/html />
<subtitle>most recent 30 from stackoverflow.com</subtitle>
<updated>2012-06-08T06:36:47Z</updated>
<id>https://stackoverflow.com/feeds/question/10943544</id>
<creativeCommons:license>http://www.creativecommons.org/licenses/by-sa/3.0/rdf</creativeCommons:license>
<entry>
<id>https://stackoverflow.com/q/10943544</id>
<re:rank scheme=http://stackoverflow.com>2</re:rank>
<title type=text>How to parse a RSS feed using javascript?</title>
<category scheme=https://stackoverflow.com/feeds/question/10943544/tags term=javascript/><category scheme=https://stackoverflow.com/feeds/question/10943544/tags term=html5/><category scheme=https://stackoverflow.com/feeds/question/10943544/tags term=jquery-mobile/>
<author>
<name>Thiru</name>
<uri>https://stackoverflow.com/users/1126255</uri>
</author>
<link rel=alternate href=https://stackoverflow.com/questions/10943544/how-to-parse-a-rss-feed-using-javascript />
<published>2012-06-08T05:34:16Z</published>
<updated>2012-06-08T06:35:22Z</updated>
<summary type=html>
<p>I need to parse the RSS-Feed(XML version2.0) using XML and I want to display the parsed detail in HTML page, I tried in many ways. But its not working. My system is running under proxy, since I am new to this field, I don't know whether it is possible or not. If any one knows please help me on this. Thanks in advance.</p>
</summary>
</entry>
<entry>
<id>https://stackoverflow.com/questions/10943544/-/10943610#10943610</id>
<re:rank scheme=http://stackoverflow.com>1</re:rank>
<title type=text>Answer by haylem for How to parse a RSS feed using javascript?</title>
<author>
<name>haylem</name>
<uri>https://stackoverflow.com/users/453590</uri>
</author>
<link rel=alternate href=https://stackoverflow.com/questions/10943544/how-to-parse-a-rss-feed-using-javascript/10943610#10943610 />
<published>2012-06-08T05:43:24Z</published>
<updated>2012-06-08T06:35:22Z</updated>
<summary type=html><h1>Parsing the Feed</h1>
<h3>With jQuery's jFeed</h3>
<p>Try this, with the <a href="http://plugins.jquery.com/project/jFeed" rel="nofollow">jFeed</a> <a href="http://www.jquery.com/" rel="nofollow">jQuery</a> plug-in</p>
<pre><code>jQuery.getFeed({
url : FEED_URL,
success : function (feed) {
console.log(feed.title);
// do more stuff here
}
});
</code></pre>
<h3>With jQuery's Built-in XML Support</h3>
<pre><code>$.get(FEED_URL, function (data) {
$(data).find("entry").each(function () { // or "item" or whatever suits your feed
var el = $(this);
console.log("------------------------");
console.log("title : " + el.find("title").text());
console.log("author : " + el.find("author").text());
console.log("description: " + el.find("description").text());
});
});
</code></pre>
<h3>With jQuery and the Google AJAX APIs</h3>
<p>Otherwise, <a href="https://developers.google.com/feed/" rel="nofollow">Google's AJAX Feed API</a> allows you to get the feed as a JSON object:</p>
<pre><code>$.ajax({
url : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;num=10&amp;callback=?&amp;q=' + encodeURIComponent(FEED_URL),
dataType : 'json',
success : function (data) {
if (data.responseData.feed &amp;&amp; data.responseData.feed.entries) {
$.each(data.responseData.feed.entries, function (i, e) {
console.log("------------------------");
console.log("title : " + e.title);
console.log("author : " + e.author);
console.log("description: " + e.description);
});
}
}
});
</code></pre>
<p>But that means you're relient on them being online and reachable.</p>
<hr>
<h1>Building Content</h1>
<p>Once you've successfully extracted the information you need from the feed, you need to create document fragments containing the elements you'll want to inject to display your data.</p>
<hr>
<h1>Injecting the content</h1>
<p>Select the container element that you want on the page and append your document fragments to it, and simply use innerHTML to replace its content entirely.</p>
</summary>
</entry></feed>
Executions
Using jQuery's Built-in XML Support
Invoking:
$.get('https://stackoverflow.com/feeds/question/10943544', function (data) {
$(data).find(entry).each(function () { // or item or whatever suits your feed
var el = $(this);
console.log(------------------------);
console.log(title : + el.find(title).text());
console.log(author : + el.find(author).text());
console.log(description: + el.find(description).text());
});
});
Prints out:
------------------------
title : How to parse a RSS feed using javascript?
author :
Thiru
https://stackoverflow.com/users/1126255
description:
------------------------
title : Answer by haylem for How to parse a RSS feed using javascript?
author :
haylem
https://stackoverflow.com/users/453590
description:
Using jQuery and the Google AJAX APIs
Invoking:
$.ajax({
url : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('https://stackoverflow.com/feeds/question/10943544'),
dataType : 'json',
success : function (data) {
if (data.responseData.feed && data.responseData.feed.entries) {
$.each(data.responseData.feed.entries, function (i, e) {
console.log(------------------------);
console.log(title : + e.title);
console.log(author : + e.author);
console.log(description: + e.description);
});
}
}
});
Prints out:
------------------------
title : How to parse a RSS feed using javascript?
author : Thiru
description: undefined
------------------------
title : Answer by haylem for How to parse a RSS feed using javascript?
author : haylem
description: undefined
[#85064] Thursday, June 7, 2012, 12 Years
[reply]
[flag answer]
answered 12 Years ago
Only authorized users can answer the question. Please sign in first, or register a free account.
maureen
Total Points: 151
Total Questions: 110
Total Answers: 110
Location: Mali
Member since Fri, Dec 3, 2021
3 Years ago
maureen questions
Mon, Oct 11, 21, 00:00, 3 Years ago
Wed, Jun 30, 21, 00:00, 3 Years ago
Thu, Apr 15, 21, 00:00, 3 Years ago
Tue, Mar 16, 21, 00:00, 3 Years ago
Mon, Dec 7, 20, 00:00, 4 Years ago