How to read values from RSS Feed using Javascript.

RSS (Really Simple Syndication) is a popular format for distributing and sharing web content, such as news articles, podcasts and blog posts. When you actually look into it, a massive amount of platforms offer a users feed as an RSS feed, e.g. Twitter, LinkedIN, …, making RSS Feeds a really powerful tool.
It allows users to subscribe to updates from their favorite websites and receive new content in a standardized format. In this tutorial, we will walk you through the steps of accessing an RSS feed using Javascript, and demonstrate how to parse and display the data on your own website. Whether you are a beginner or an experienced developer, this tutorial will provide you with the knowledge and skills you need to incorporate RSS feeds into your projects. So let’s get started!

Structure of RSS Feeds

This is an example of the data saved in an RSS Feed:

These are just random Articles from CNN.

CNN.com – RSS Channel – HP Hero

I displayed this example using the out – of – the – box WordPress RSS Widget, and showing a Title and a Link is pretty much all it’s going to do for you. But if we look at the actual code of an RSS Feed for a second, we can see that there is a lot more data to read here:

<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        <title>My Newsletter</title>
        <atom:link href="link" rel="self" type="application/rss+xml"/>
        <link>link</link>
        <description>Name of Website</description>
        <lastBuildDate>Tue, 20 Dec 2022 13:11:31 +0000</lastBuildDate>
        <image>...</image>
        <item>
            <title>
            Democrats share documents showing what the former president filed on income tax returns and explaining the committee's investigation>
            </title>
            <link>
            https://www.cnn.com/2022/12/20/politics/house-trump-tax-returns/index.html
            </link>
            <pubDate>Wed, 21 Dec 2022 05:02:23 GMT</pubDate>
        </item>
        <item>...</item>
        <item>...</item>
        <item>...</item>
        <item>...</item>
        <item>...</item>
    </channel>
</rss>

As you can see, the whole order of the feed works very similar to HTML.
At the top, we get some general information about the Feed, followed by an item Tag filled with all the information about each new release.

If you now want access to certain elements of the RSS Feed to use RSS Feeds for more than just a glorified list of links, you will need to parse through the feed:

Scanning the data of the first item + RSS Restrictions

Let’s start simple and parse the first items title of a single RSS Feed. Check out this code, let’s see whether you get it:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
      
    <h5 id="title">Title failed to load</h5>
    
    <script>
      async function getRecentData(rssUrl) 
      {
        // fetch the RSS feed
        const response = await fetch(rssUrl);

        // parse the RSS feed into an XML document
        const xml = await response.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(xml, 'application/xml');

        // get the title of the first item
        const firstItem = doc.querySelector('item');
        
        document.getElementById('title').innerHTML = firstItem.querySelector('title').textContent;
      }
      
      getRecentData("http://rss.cnn.com/rss/cnn_topstories.rss");

    </script>
  </body>
</html>

This code is designed to parse an RSS feed and display the title of the first item in the feed. The first step is to fetch the RSS feed using the fetch function. This returns a response which is then converted into an XML document using the DOMParser object.

Once the XML document has been created, the code selects the first item element in the document using querySelector('item'). It then retrieves the title of this element using querySelector('title') and displays it on the page by setting the innerHTML property of an h5 element with the id „title“.

If the feed is successfully fetched and parsed, the title of the first item will be displayed on the page. If there is an error at any point in the process, the default text „Title failed to load“ will be displayed.

Let’s see whether it works:

Title failed to load

Jupp, that would have been way to easy, huh – there are many restrictions to what RSS feeds can be displayed where.

There are a few limitations to consider when embedding RSS feeds in your website.

One restriction is that RSS feeds can only be displayed on websites using the same protocol as the feed itself. For example, if the RSS feed is served over HTTPS, it can only be displayed on a website using HTTPS. Attempting to display the feed on a website using HTTP will result in a mixed content error.

Another limitation to consider is that some websites do not allow their content to be embedded on other websites using RSS feeds. In these cases, attempting to display the feed will result in an error or an empty feed.

It is also worth noting that some websites may have specific terms of use or licensing restrictions that prohibit the use of their content in RSS feeds. It is important to familiarize yourself with the terms of use for any website whose content you plan to display using an RSS feed.

Finally, keep in mind that RSS feeds are not a replacement for a website’s API, and they may not provide all of the data or functionality that you need. In these cases, you may need to use a different method for accessing the data or consider building your own API.

In this example, the program failes because of the first restriction, the CNN rss feed being hosted on a website with HTTPS protocol, of course, while this ✨quality website✨ uses HTTP in order to get all my users data stolen and sold on the chinese black market.

Let’s just display this websites own RSS Feed (http://mrfresch.de/feed/) to show our program working:

Title failed to load

In case that sounds interesting to you – check it out ^_^

Let's go crazy with this

Brilliant! We have now successfully got some data from an RSS Feed – time to scale this up. First of all, lets get not only the title, but also the date and the description from an RSS feed, and lets do this for every item in the feed.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
    <div id="feed"></div>
    
    <script>
      async function getRecentData(rssUrl) 
      {
        // fetch the RSS feed
        const response = await fetch(rssUrl);

        // parse the RSS feed into an XML document
        const xml = await response.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(xml, 'application/xml');

        // get the first 10 items in the feed
        const items = Array.from(doc.querySelectorAll('item:nth-of-type(-n+10)'));
        
        // create an HTML string for each item
        const itemsHtml = items.map(item => {
          const title = item.querySelector('title').textContent;
          const description = item.querySelector('description').textContent;
          const date = item.querySelector('pubDate').textContent;
          return `<div>
            <h3>${title}</h3>
            <p>${description}</p>
            <p>${date}</p>
          </div>`;
        }).join('');
        
        // insert the HTML string into the page
        document.getElementById('feed').innerHTML = itemsHtml;
      }
      
      getRecentData("http://mrfresch.de/feed/");

    </script>
  </body>
</html>

This displays:

You can close me if you want to

Brilliant! Now, lets do what I started looking at RSS Feeds: A custom Feed for your WordPress Website.

This program takes in as many feeds as you want, sorts all of the items inside all of them into one timeline, and then calls a function for each item that displays that item. In that function, we can make some changes. So, for example, if we have a feed containing Articles and a feed containing Podcast Episodes, we can create a button that says which group its a part of, because the origin feed of a given item also gets passed into the display function. There are also some other things added specific to my use case, like changing up the date.

Check it out:

function formatDate(date) {
  const options = {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
  };
  
  return `${date.toLocaleDateString('en-US', options).split('/').join('.')}`;  // Return the formatted date
}

function processRssFeeds(feedUrls, callback) {
	// Fetch the contents of each RSS feed
	Promise.all(feedUrls.map(url => fetch(url)))
	  .then(responses => Promise.all(responses.map(res => res.text())))
	  .then(texts => texts.map(text => new DOMParser().parseFromString(text, 'text/xml')))
	  .then(xmlDocs => xmlDocs.reduce((items, xmlDoc, i) => {  // Add an index to the reduce function
		// Extract the items from the XML document
		const xmlItems = xmlDoc.querySelectorAll('item');
		return items.concat([...xmlItems].map(item => ({
		  title: item.querySelector('title').textContent,
		  date: new Date(item.querySelector('pubDate').textContent),
		  description: item.querySelector('description').textContent,
		  feedUrl: feedUrls[i],  // Use the index to get the URL of the feed
		})));
	  }, []))
	  .then(items => {
		// Sort the items by their publication date
		items.sort((a, b) => b.date - a.date);
	
		// Call the callback function for each item
		items.forEach(item => callback(item.title, item.date, item.description, item.feedUrl));
	});
}  
  

const feedUrls = [
	'https://example.com/feed/',
	'https://example2.com/feed/',
];

processRssFeeds(feedUrls, (title, date, description, feed) => {
  // Create a new div element
  const div = document.createElement('div');

  let columns = 3;
  let itemmargin = 25;

  console.log(feed);
  if (feed == 'https://example.com/feed/') {
	var feedName = 'Feed 1 element';
  }
  if (feed == 'https://example2.com/feed/') {
  	var feedName = 'Feed 2 element';
  }

  // Set the inner HTML of the div to the title, date, description, and feed of the item
  div.className = "item";
  div.style.maxWidth = (document.getElementById('itemdiv').clientWidth / columns - itemmargin * 2) - 60 + "px";
  div.innerHTML = `
    <h2>${title}</h2>
    <p>${formatDate(date)}</p>
    <p>${description}</p>
    <p style="background-color: blue; color: white; display: inline; padding: 15px; margin: 10px;">${feedName}</p>
  `;

  // Append the div to the existing itemdiv element
  document.querySelector('#itemdiv').appendChild(div);
});

I will not show you the result – test it yourself, play around with it a bit. Bye bye!