html - How to parse an RSS feed using JavaScript? -

i need parse rss feed (xml version 2.0) , display parsed details in html page.

parsing feed

with jquery's jfeed

_{(don't recommend one, see other options.)}

jquery.getfeed({    url     : feed_url,    success : function (feed) {       console.log(feed.title);       // 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 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 , 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 means you're relient on them being online , reachable.

---

building content

once you've extracted information need feed, create documentfragments (with document.createdocumentfragment() containing elements (created document.createelement()) you'll want inject display data.

---

injecting content

select container element want on page , append document fragments it, , use innerhtml replace content entirely.

something like:

$('#rss-viewer').append(adocumentfragmententry); 

or:

$('#rss-viewer')[0].innerhtml = adocumentfragmentofallentries.innerhtml; 

---

test data

using question's feed, of 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 parse 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 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 parse 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">             &lt;p&gt;i need parse rss-feed(xml version2.0) using xml , want display parsed detail in html page, tried in many ways. not working. system running under proxy, since new field, don&#39;t know whether possible or not. if 1 knows please me on this. in advance.&lt;/p&gt;          </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 haylem how parse 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">&lt;h1&gt;parsing feed&lt;/h1&gt;  &lt;h3&gt;with jquery&#39;s jfeed&lt;/h3&gt;  &lt;p&gt;try this, &lt;a href=&quot;http://plugins.jquery.com/project/jfeed&quot; rel=&quot;nofollow&quot;&gt;jfeed&lt;/a&gt; &lt;a href=&quot;http://www.jquery.com/&quot; rel=&quot;nofollow&quot;&gt;jquery&lt;/a&gt; plug-in&lt;/p&gt;  &lt;pre&gt;&lt;code&gt;jquery.getfeed({    url     : feed_url,    success : function (feed) {       console.log(feed.title);       // more stuff here    } }); &lt;/code&gt;&lt;/pre&gt;  &lt;h3&gt;with jquery&#39;s built-in xml support&lt;/h3&gt;  &lt;pre&gt;&lt;code&gt;$.get(feed_url, function (data) {     $(data).find(&quot;entry&quot;).each(function () { // or &quot;item&quot; or whatever suits feed         var el = $(this);          console.log(&quot;------------------------&quot;);         console.log(&quot;title      : &quot; + el.find(&quot;title&quot;).text());         console.log(&quot;author     : &quot; + el.find(&quot;author&quot;).text());         console.log(&quot;description: &quot; + el.find(&quot;description&quot;).text());     }); }); &lt;/code&gt;&lt;/pre&gt;  &lt;h3&gt;with jquery , google ajax apis&lt;/h3&gt;  &lt;p&gt;otherwise, &lt;a href=&quot;https://developers.google.com/feed/&quot; rel=&quot;nofollow&quot;&gt;google&#39;s ajax feed api&lt;/a&gt; allows feed json object:&lt;/p&gt;  &lt;pre&gt;&lt;code&gt;$.ajax({   url      : document.location.protocol + &#39;//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;amp;num=10&amp;amp;callback=?&amp;amp;q=&#39; + encodeuricomponent(feed_url),   datatype : &#39;json&#39;,   success  : function (data) {     if (data.responsedata.feed &amp;amp;&amp;amp; data.responsedata.feed.entries) {       $.each(data.responsedata.feed.entries, function (i, e) {         console.log(&quot;------------------------&quot;);         console.log(&quot;title      : &quot; + e.title);         console.log(&quot;author     : &quot; + e.author);         console.log(&quot;description: &quot; + e.description);       });     }   } }); &lt;/code&gt;&lt;/pre&gt;  &lt;p&gt;but means you&#39;re relient on them being online , reachable.&lt;/p&gt;  &lt;hr&gt;  &lt;h1&gt;building content&lt;/h1&gt;  &lt;p&gt;once you&#39;ve extracted information need feed, need create document fragments containing elements you&#39;ll want inject display data.&lt;/p&gt;  &lt;hr&gt;  &lt;h1&gt;injecting content&lt;/h1&gt;  &lt;p&gt;select container element want on page , append document fragments it, , use innerhtml replace content entirely.&lt;/p&gt; </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 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 parse rss feed using javascript? author     :              thiru             https://stackoverflow.com/users/1126255  description:  ------------------------ title      : answer haylem how parse rss feed using javascript? author     :              haylem             https://stackoverflow.com/users/453590  description:  

using jquery , 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 parse rss feed using javascript? author     : thiru description: undefined ------------------------ title      : answer haylem how parse rss feed using javascript? author     : haylem description: undefined