How to Create a RSS Reader App in JavaScript

By Preethi Ranjit. in Coding. Updated on October 31, 2017.

RSS (Really Simple Syndication) is a standardized format used by online publishers to syndicate their content to other websites and services. An RSS document, also known as a feed, is an XML document carrying the content that a publisher wishes to distribute.

RSS feeds are available on almost all online news websites and blogs for their readers to stay up-to-date with their contents. They can also be found on non-text based websites such as YouTube, where you can use the feed of a YouTube channel to be informed of the latest videos.

Programs that access these feeds, and read and display their contents are called RSS readers. You can create a simple RSS reader program in JavaScript. In this tutorial, we’ll see how to.

Structure of an RSS feed

An RSS feed has a root element called <rss>, similar to the <html> tag found in HTML documents. Inside the <rss> tag, there is a <channel> element, kind of like <body> in HTML, that includes many sub-elements containing the distributed content of the website.

A feed usually carries some basic information such as the title, URL, and description of the website and of the individual updated posts, articles, or other contents of that website. These information are found in <title>, <link>, and <description> elements, respectively.

When these tags are directly present inside <channel>, they hold the title, URL, and description of the website. When they’re present inside <item> that holds the information about the updated posts, they represent the same information as before but that of the individual contents that each <item> represent.

There are also some optional elements that may be present in an RSS feed, providing supplementary information such as images or copyrights on the distributed content. You can learn about them in this RSS 2.0 specification at cyber.harvard.edu.

Here’s a sample of how the RSS feed of a website might look like:

<rss version="2.0">
  <channel>
    <title>Hongkiat</title>
    <link>https://www.hongkiat.com/</link>
    <description>Design Tips, Tutorial and Inspirations</description>
    <language>en-us</language>
    <item>
    	<title>Visualize Any CSS Stylesheet with CSS Stats</title>
    	<description>Ever wondered how many CSS rules
      are in a stylesheet? Or have you ever
      wanted to see…</description>
    	<pubDate>18/05/2017</pubDate>
    	<link>https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/</link>
    </item>
    <item>
    	<title>Amazon Echo Show – The Latest Alexa-powered Smart Device</title>
    	<description>Amazon isn't stranger to the concept of smart home
      systems with an embedded digital assistant.
      After all, the…</description>
    	<pubDate>17/05/2017</pubDate>
    	<link>https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/</link>
    </item>
  </channel>
</rss>

Fetching the feed

We need to fetch the feed with our RSS reader application. On a website, the URL of an RSS feed can be found inside the <link> tag using the application/rss+xml type. For example, you’ll find the following RSS feed link on Hongkiat.com.

<link rel="alternate" type="application/rss+xml"
title="Hongkiat.com » Feed"
href="https://www.hongkiat.com/blog/feed/">

First, let’s see how to get the feed URL of a website using JavaScript.

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'))

The fetch() method is a global method that asynchronously fetches a resource. It takes the URL of the resource as an argument (the URL of the website in our code). It returns a Promise object, so when the method successfully fetches the website (i.e. the Promise is fulfilled), the first function inside the then() statement handles the fetched response (res in above code).

The fetched response is then fully read into a text string using the text() method. This text represents the HTML text of our fetched website. Like fetch(), text() also returns a Promise object. So, when it successfully creates a response text from the response stream, then() will handle that response text (htmlText in above code).

Once HTML text of the website is available, we use DOMParser API to parse it into a DOM document. DOMParser parses an XML/HTML text string into a DOM document. Its method, parseFromString(), takes two arguments: the text to be parsed and the content type.

Then, from the created DOM document, we find the href value of the relevant <link> tag using the querySelector() method in order to get the URL of the feed.

Parsing and displaying the feed

Once we got the feed URL of the website, we need to fetch and read the RSS document found at that URL.

fetch(feedUrl).then((res) => {
  res.text().then((xmlTxt) => {
    var domParser = new DOMParser()
    let doc = domParser.parseFromString(xmlTxt, 'text/xml')
    doc.querySelectorAll('item').forEach((item) => {
	     let h1 = document.createElement('h1')
	      h1.textContent = item.querySelector('title').textContent
	       document.querySelector('output').appendChild(h1)
       })
     })
})

In the same way as we fetched and parsed the website, now we get and parse the XML feed into a DOM document. To achieve this, we use the 'text/xml' content type in the parseFromString() method.

In the parsed document, we select all the <item> elements using the querySelectorAll method and loop through each.

Inside each element, we can access tags like <title>, <description>, and <link>, that are carrying the feed content. And, our simple RSS reader application is done, you can style the content of the fetched feeds as you desire.

Github demo

You can check out the more detailed version of the code used in this post in our Github repo. The more detailed version fetches three feeds (Mozilla Hacks, Hongkiat, and the Webkit blog) using a JSON file and also adds some CSS styles to the RSS reader.