How to Create a RSS Reader App in JavaScript

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

RSS feeds are accessible on roughly all online news websites and blogs for their readers to stay benefaction with their contents. They can also be found on non-text formed websites such as YouTube, where we can use a feed of a YouTube channel to be informed of a latest videos.

Programs that entrance these feeds, and review and arrangement their essence are called RSS readers. You can emanate a elementary RSS reader module in JavaScript. In this tutorial, we’ll see how to.

RSS reader app demoRSS reader app demo

Structure of an RSS feed

An RSS feed has a base element called rss, identical to a html tab found in HTML documents. Inside a rss tag, there is a channel element, kind of like body in HTML, that includes many sub-elements containing a distributed calm of a website.

A feed customarily carries some basic information such as a title, URL, and outline of a website and of a 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 benefaction inside channel, they reason a title, URL, and outline of a website. When they’re present inside item that holds a information about a updated posts, they paint a same information as before though that of a particular essence that any item represent.

There are also some optional elements that competence be benefaction in an RSS feed, providing extra information such as images or copyrights on a distributed content. You can learn about them in this RSS 2.0 specification during cyber.harvard.edu.

Here’s a representation of how a RSS feed of a website competence demeanour like:

rss version="2.0"
  channel
    titleHongkiat/title
    linkhttp://www.hongkiat.com//link
    descriptionDesign Tips, Tutorial and Inspirations/description
    languageen-us/language
    item
    	titleVisualize Any CSS Stylesheet with CSS Stats/title
    	descriptionEver wondered how many CSS rules
      are in a stylesheet? Or have we ever
      wanted to see…/description
    	pubDate18/05/2017/pubDate
    	linkhttp://www.hongkiat.com/blog/css-stylesheet-with-css-stats//link
    /item
    item
    	titleAmazon Echo Show – The Latest Alexa-powered Smart Device/title
    	descriptionAmazon isn't foreigner to a judgment of intelligent home
      systems with an embedded digital assistant.
      After all, the…/description
    	pubDate17/05/2017/pubDate
    	linkhttp://www.hongkiat.com/blog/alexa-device-amazon-echo-show//link
    /item
  /channel
/rss

Fetching a feed

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

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

First, let’s see how to get a feed URL of a website regulating 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 attractive a website'))

The fetch() process is a tellurian process that asynchronously fetches a resource. It takes a URL of a apparatus as an evidence (the URL of a website in a code). It returns a Promise object, so when a process successfully fetches a website (i.e. a Promise is fulfilled), a initial duty inside a then() matter handles a fetched response (res in above code).

The fetched response is afterwards fully review into a calm string regulating a text() method. This calm represents a HTML calm of a fetched website. Like fetch(), text() also returns a Promise object. So, when it successfully creates a response calm from a response stream, then() will hoop that response calm (htmlText in above code).

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

Then, from a combined DOM document, we find a href value of a applicable link tag regulating a querySelector() process in sequence to get a URL of a feed.

Parsing and displaying a feed

Once we got a feed URL of a website, we need to fetch and review a RSS document found during 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 a same approach as we fetched and parsed a website, now we get and parse a XML feed into a DOM document. To grasp this, we use a 'text/xml' calm form in a parseFromString() method.

In a parsed document, we select all a item elements regulating a querySelectorAll process and loop by each.

Inside any element, we can access tags like title, description, and link, that are carrying a feed content. And, a elementary RSS reader focus is done, we can character a calm of a fetched feeds as we desire.

Github demo

You can check out a more minute version of a formula used in this post in a Github repo. The some-more minute chronicle fetches 3 feeds (Mozilla Hacks, Hongkiat, and a Webkit blog) using a JSON file and also adds some CSS styles to a RSS reader.

Add Comment