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. Read Also: How to Create RSS Feed Logo with CSS3 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 feedAn RSS feed has a root element called 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 When these tags are directly present inside 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>http://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>http://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>http://www.hongkiat.com/blog/alexa-device-amazon-echo-show/</link> </item> </channel> </rss> Fetching the feedWe 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 rel="alternate" type="application/rss+xml" title="Hongkiat.com » Feed" href="http://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 Read Also: Getting Started with JavaScript Promises The fetched response is then fully read into a text string using the Once HTML text of the website is available, we use Then, from the created DOM document, we find the Parsing and displaying the feedOnce 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 In the parsed document, we select all the Inside each element, we can access tags like Github demoYou 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. from http://www.hongkiat.com/blog/rss-reader-in-javascript/
0 Comments
Leave a Reply. |