124

I need to parse an RSS feed (XML version 2.0) and display the parsed details in an HTML page.

approxiblue
  • 6,982
  • 16
  • 51
  • 59
Thiru
  • 2,374
  • 7
  • 21
  • 29
  • 14
    1) **What exactly** have you tried? 2) **What exactly** do you want to parse? (which info do you want to extract from the feed?) 3) **Where exactly** do you want it displayed in your page? 4) **What exactly** is your HTML markup? Short of that, we all like to pretend that we are David Copperfield, but I'm not sure we'd fool the audience very long. – haylem Jun 08 '12 at 05:41
  • No I have a successive feed with me. I cant publish it. Thats why I put a sample here – Thiru Jun 08 '12 at 06:13
  • ok but that's NOT a sample. It was just a URL to a non-existent page. In that case my answer has a "sample". It's the FEED_URL variable. Just put what you need in there. If you need more help, you also need to give more details about which elements of the feed you need, what you want the HTMK stubs to look like, where you want to inject the generated HTML stubs, and you could also provide a real sample of your RSS feed (just copy pase an excerpt and replace actual content with placeholders). – haylem Jun 08 '12 at 06:17

9 Answers9

222

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">
            &lt;p&gt;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&#39;t know whether it is possible or not. If any one knows please help me on this. Thanks 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 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">&lt;h1&gt;Parsing the Feed&lt;/h1&gt;

&lt;h3&gt;With jQuery&#39;s jFeed&lt;/h3&gt;

&lt;p&gt;Try this, with the &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);
      // do 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 your 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 and the 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 you to get the feed as a 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 that means you&#39;re relient on them being online and reachable.&lt;/p&gt;

&lt;hr&gt;

&lt;h1&gt;Building Content&lt;/h1&gt;

&lt;p&gt;Once you&#39;ve successfully extracted the information you need from the feed, you need to create document fragments containing the elements you&#39;ll want to inject to display your data.&lt;/p&gt;

&lt;hr&gt;

&lt;h1&gt;Injecting the content&lt;/h1&gt;

&lt;p&gt;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.&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 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
Community
  • 1
  • 1
haylem
  • 22,460
  • 3
  • 67
  • 96
  • 1
    Thanks for your answer haylem. But I didnt get an output for this. Is ot possible with javascript? – Thiru Jun 08 '12 at 06:17
  • @Thiru: this IS javascript. What does not work? What does it do that's not what you want? Help me to help you. I asked you questions to find out what you want. If you don't answer them, I can't help you. – haylem Jun 08 '12 at 06:19
  • - - en 2012-06-08T03:58/dc:date> - http://www.example.com/ex/page1/niger/ LAGO - - <![CDATA[

    ]]>
    – Thiru Jun 08 '12 at 06:27
  • 1
    @Thiru: I just tried the last method with this question's RSS feed (http://stackoverflow.com/feeds/question/10943544) and it worked fine for me. – haylem Jun 08 '12 at 06:27
  • sorry for the inconv.. Im exactly having the page like this. now i want the title, description, link and image in my HTML page. – Thiru Jun 08 '12 at 06:29
  • if you dont mind,pls post ur working code snippet here.. because Im entirely new to this development. i don knw where to put this stuff – Thiru Jun 08 '12 at 06:35
  • 8
    You have might entire working code snippet here. I'm sure you can work out the rest on your own. – haylem Jun 08 '12 at 06:35
  • Where it says FEED_URL. I just added a full example. You can try to run it directly from this page, using your javacript console or firebug. – haylem Jun 08 '12 at 06:44
  • I get: XML Parsing Error: no element found Location: moz-nullprincipal:{3277effa-c871-4570-b0ef-56f95eb8b349} Line Number 1, Column 1: – Timmy Jan 13 '14 at 15:04
  • 2
    @Timmy: doing what? Are you a friend of Thiru? You have similar problem reporting techniques. I just copy-pasted the last 2 code snippets into my console and ran them and got the outputs as expected. What did you do, how, for what resource? – haylem Jan 14 '14 at 06:08
  • @haylem Who's Thiru? I got an error saying the XML is not valid. But it's ok, I use the Google one and it works perfectly, thanks – Timmy Jan 14 '14 at 18:13
  • 1
    @haylem is this just an example for same domain requests? I get the following message: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://stackoverflow.com/feeds/question/10943544. (Reason: CORS header 'Access-Control-Allow-Origin' missing)." – DVCITIS Nov 09 '15 at 17:43
  • 1
    @Pete: Yes: like any other Javascript AJAX query, it is limited by CORS (and your browser's localhost, where I assume you are testing, does not match stackoverflow.com). You can disable CORS protection in your browser for testing (useful for scripting and scraping, obviously, but dangerous). Or if you want this to work on another domain, you'll need the server to agree to CORS requests by whitelisting domains. Maybe I should change the example to a domain allowing CORS, but I actually thought it better that way. – haylem Nov 10 '15 at 02:09
  • 2
    Google AJAX APIs is deprecated. It is not available since Jan 2017. – Ezee Jan 11 '17 at 10:03
  • @Ezee: indeed, it now replies with a 403 and message "This API is no longer available". That's too bad. – haylem Jan 11 '17 at 22:38
  • 1
    As per https://developers.google.com/feed/v1/devguide "This API is officially deprecated and will stop working after December 15th, 2016. See our deprecation policy in our Terms of Service for details." – Mohammed Safeer Jan 31 '17 at 07:34
39

Another deprecated (thanks to @daylight) option, and the easiest for me (this is what I'm using for SpokenToday.info):

The Google Feed API without using JQuery and with only 2 steps:

  1. Import the library:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("feeds", "1");</script>
    
  2. Find/Load feeds (documentation):

    var feed = new google.feeds.Feed('http://www.google.com/trends/hottrends/atom/feed?pn=p1');
    feed.load(function (data) {
        // Parse data depending on the specified response format, default is JSON.
        console.dir(data);
    });
    
  3. To parse data, check documentation about the response format.

Nahuel Barrios
  • 1,870
  • 19
  • 22
  • 5
    Google says:This API is officially deprecated. –  Aug 15 '15 at 21:13
  • 23
    The Google Feed API is deprecated and no longer working as of 12/02/2015. Bummer – raddevus Dec 02 '15 at 18:58
  • based on that code, could you add a prompt for entering feed url, then concatenate the property to include a value in order to parse whatever rss feed you wanted? for example, if I was dealing with multiple images, I could concatenate the string and value: `document.getElementById('image').style.backgroundImage = "url('" + src + "')";` – noobninja May 13 '16 at 20:24
  • 2
    Google AJAX APIs is deprecated. It is not available since Jan 2017 – Ezee Jan 11 '17 at 10:04
  • 7
    anybody know of a suitable alternative now that Googles API is down? – duellsy Jan 17 '17 at 04:50
5

If you are looking for a simple and free alternative to Google Feed API for your rss widget then rss2json.com could be a suitable solution for that.

You may try to see how it works on a sample code from the api documentation below:

google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed("https://news.ycombinator.com/rss");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          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);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
<html>
  <head>    
     <script src="https://rss2json.com/gfapi.js"></script>
  </head>
  <body>
    <p><b>Result from the API:</b></p>
    <div id="feed"></div>
  </body>
</html>
eQ19
  • 9,880
  • 3
  • 65
  • 77
3

If you want to use a plain javascript API, there is a good example at https://github.com/hongkiat/js-rss-reader/

The complete description at https://www.hongkiat.com/blog/rss-reader-in-javascript/

It uses fetch method as a global method that asynchronously fetches a resource. Below is a snap of code:

fetch(websiteUrl).then((res) => {
  res.text().then((htmlTxt) => {
    var domParser = new DOMParser()
    let doc = domParser.parseFromString(htmlTxt, 'text/html')
    var feedUrl = doc.querySelector('link[type="application/rss+xml"]').href
  })
}).catch(() => console.error('Error in fetching the website'))
Alireza Fattahi
  • 42,517
  • 14
  • 123
  • 173
  • The example in the article you quote doesn't work as is. You need to modify the lines 15 and 26 in rss.js to use a CORS proxy to make it work. If you don't, you'll get some errors because of the Same Origin policy: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin Moreover, the fetch API doesn't work in Microsoft Internet Explorer 11, rather use XMLHTTPRequest: https://developer.microsoft.com/en-us/microsoft-edge/status/fetchapi/ I used this source code on my own server. I encourage you to spend some time in performing some checks before posting. – gouessej Jun 28 '20 at 08:39
  • The CORS issue is not related this answer. Please re-read the CORS link you mentioned or some other resources about fixing CORS issue https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work. – Alireza Fattahi Jun 28 '20 at 11:10
  • No the CORS issue is related to your answer. The example in the article you quoted can't be used as is and obviously it's up to the hosts to set those headers, it can't be fixed on the client side, the only workaround consists in using a CORS proxy. Have you ever tried the source code mentioned in this article? – gouessej Jun 28 '20 at 11:22
  • Of course, we are using it in a hybrid mobile app without any issue. – Alireza Fattahi Jun 28 '20 at 11:57
  • 1
    A Mozilla contributor who closed a question of mine about my use of this source code in my own project advised me to use a CORS proxy. It can work in server side, maybe in Node.JS but it can't work as is in client side. I'm not the only person who had this problem with this source code and I saw some comments in a similar article on css-tricks: https://css-tricks.com/how-to-fetch-and-parse-rss-feeds-in-javascript/#comment-1756666 You're in a very specific case. – gouessej Jun 28 '20 at 12:34
3

For anyone else reading this (in 2019 onwards) unfortunately most JS RSS reading implementations don't now work. Firstly Google API has shut down so this is no longer an option and because of the CORS security policy you generally cannot now request RSS feeds cross-domains.

Using the example on https://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options (2015) I get the following:

Access to XMLHttpRequest at 'https://feeds.feedburner.com/raymondcamdensblog?format=xml' from origin 'MYSITE' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is correct and is a security precaution by the end website but does now mean that the answers above are unlikely to work.

My workaround will probably be to parse the RSS feed through PHP and allow the javascript to access my PHP rather than trying to access the end-destination feed itself.

Ukuser32
  • 2,147
  • 2
  • 22
  • 32
2

I was so exasperated by many misleading articles and answers that I wrote my own RSS reader: https://gouessej.wordpress.com/2020/06/28/comment-creer-un-lecteur-rss-en-javascript-how-to-create-a-rss-reader-in-javascript/

You can use AJAX requests to fetch the RSS files but it will work if and only if you use a CORS proxy. I'll try to write my own CORS proxy to give you a more robust solution. In the meantime, it works, I deployed it on my server under Debian Linux.

My solution doesn't use JQuery, I use only plain Javascript standard APIs with no third party libraries and it's supposed to work even with Microsoft Internet Explorer 11.

gouessej
  • 3,640
  • 3
  • 33
  • 67
0

You can use jquery-rss or Vanilla RSS, which comes with nice templating and is super easy to use:

// Example for jquery.rss
$("#your-div").rss("https://stackoverflow.com/feeds/question/10943544", {
    limit: 3,
    layoutTemplate: '<ul class="inline">{entries}</ul>',
    entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})

// Example for Vanilla RSS
const RSS = require('vanilla-rss');
const rss = new RSS(
    document.querySelector("#your-div"),
    "https://stackoverflow.com/feeds/question/10943544",
    { 
      // options go here
    }
);
rss.render().then(() => {
  console.log('Everything is loaded and rendered');
});

See http://jsfiddle.net/sdepold/ozq2dn9e/1/ for a working example.

sdepold
  • 6,171
  • 2
  • 41
  • 47
0

Trying to find a good solution for this now, I happened upon the FeedEk jQuery RSS/ATOM Feed Plugin that does a great job of parsing and displaying RSS and Atom feeds via the jQuery Feed API. For a basic XML-based RSS feed, I've found it works like a charm and needs no server-side scripts or other CORS workarounds for it to run even locally.

jimiayler
  • 674
  • 2
  • 11
  • 27
0

I did not find a solution for parsing RSS just with js due to CORS error I kept receiving. Installing a plugin is not an option for me and building a proxy is not fun either and the small solutions I found didn't work.

So just in case someone is getting here and can use server-side, I found this solution in PHP that worked for me perfectly! (without the CORS error! "x has been blocked by CORS policy...")

Johanna
  • 566
  • 1
  • 4
  • 17