RSS (Really Simple Syndication I always called it but also Rich Site Summary) is an XML document containing headline or summary items. Consuming RSS feeds in JavaScript is more convenient with JSON data so we'll take a look at tools to convert a feed to JSON. Then we'll look at examples of using RSS data on a web page and CEC (Content & Experience Cloud) component.
There are a number of RSS feed guides, for example NYU Libraries. Using New York Times - Technology section as an example, http://feeds.nytimes.com/nyt/rss/Technology the returned XML data will appear as below.
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:nyt="http://www.nytimes.com/namespaces/rss/2.0" version="2.0"> <channel> <title>NYT > Technology</title> <link> https://www.nytimes.com/section/technology?partner=rss&emc=rss </link> <atom:link rel="self" type="application/rss+xml" href="http://www.nytimes.com/services/xml/rss/nyt/Technology.xml"/> <description/> <language>en-us</language> <copyright>Copyright 2018 The New York Times Company</copyright> <lastBuildDate>Fri, 23 Feb 2018 23:41:37 GMT</lastBuildDate> <image> <title>NYT > Technology</title> <url> https://static01.nyt.com/images/misc/NYT_logo_rss_250x40.png </url> <link> https://www.nytimes.com/section/technology?partner=rss&emc=rss </link> </image> <item> <title> U.S. Blocks a Chinese Deal Amid Rising Tensions Over Technology </title> <link> https://www.nytimes.com/2018/02/23/technology/china-microchips-cfius-xcerra.html?partner=rss&emc=rss </link> <guid isPermaLink="true"> https://www.nytimes.com/2018/02/23/technology/china-microchips-cfius-xcerra.html </guid> <atom:link rel="standout" href="https://www.nytimes.com/2018/02/23/technology/china-microchips-cfius-xcerra.html?partner=rss&emc=rss"/> <media:content url="https://static01.nyt.com/images/2018/02/24/world/24cfius/24cfius-moth.jpg" medium="image" height="151" width="151"/> <media:description> Robots at an automobile plant in the Chinese city of Hangzhou. China wants to use state support and overseas acquisitions to dominate high-tech fields like big data, advanced robotics and electric cars. </media:description> <media:credit>Giulia Marchi for The New York Times</media:credit> <description> A maker of chip-testing equipment, Xcerra, said it was walking away from a proposed sale to a Chinese group because of regulatory concerns. </description> <dc:creator>RAYMOND ZHONG</dc:creator> <pubDate>Fri, 23 Feb 2018 09:24:10 GMT</pubDate> <category domain="http://www.nytimes.com/namespaces/keywords/des">Computer Chips</category> <category domain="http://www.nytimes.com/namespaces/keywords/mdes">Mergers, Acquisitions and Divestitures</category> <category domain="http://www.nytimes.com/namespaces/keywords/nyt_geo">China</category> <category domain="http://www.nytimes.com/namespaces/keywords/nyt_org_all">Xcerra</category> </item>
The structure of the XML data consists of header information for the channel followed by an array of items.
Although it would be possible to work with the XML data directly in JavaScript it is cleaner and easier to convert it to JSON upfront. Plus there is JavaScript code available for just that purpose.
We'll use the npm module rss-to-json for the conversion. To try it out, use or setup a node.js environment and install the rss-to-json module:
npm install rss-to-json --save
Start a node.js REPL session and create a Feed variable:
let Feed=require('rss-to-json')
then try the NY Times - Technology feed, list the title and link for each item.
Feed.load('http://feeds.nytimes.com/nyt/rss/Technology', function(err, rss) { for (item of rss.items) { console.log(item.title, " ", item.link, " ") } })
looks like the conversion is working fine.
Dropbox Files for I.P.O., and Other 'Unicorns' Are Watching https://www.nytimes.com/2018/02/23/technology/dropbox-files-for-ipo-and-other-unicorns-are-watching.html?partner=rss&emc=rss U.S. Blocks a Chinese Deal Amid Rising Tensions Over Technology https://www.nytimes.com/2018/02/23/technology/china-microchips-cfius-xcerra.html?partner=rss&emc=rss Bits: Dai and Jack's Week in Tech: Don't Trust the Internet https://www.nytimes.com/2018/02/23/technology/dai-and-jacks-week-in-tech-dont-trust-the-internet.html?partner=rss&emc=rss Plumbing Problem Shows Powers and Limits of 3 Tax Programs https://www.nytimes.com/2018/02/23/business/plumbing-problem-shows-powers-and-limits-of-3-tax-programs.html?partner=rss&emc=rss Tech Tip: Organizing Pictures With Words https://www.nytimes.com/2018/02/23/technology/personaltech/organizing-pictures-with-words.html?partner=rss&emc=rss Tech Tip: Leaping Over the Language Barrier https://www.nytimes.com/2018/02/22/technology/personaltech/web-page-translation.html?partner=rss&emc=rss Tech We're Using: Limiting the Influence of Tech When You Report on It https://www.nytimes.com/2018/02/21/technology/personaltech/limiting-influence-tech.html?partner=rss&emc=rss Bahrain Activist Gets 5-Year Sentence for 'Insulting' Tweets https://www.nytimes.com/2018/02/21/world/middleeast/nabeel-rajab-bahrain-twitter.html?partner=rss&emc=rss Tech Fix: In an Era of 'Smart' Things, Sometimes Dumb Stuff Is Better https://www.nytimes.com/2018/02/21/technology/personaltech/smart-things-dumb-stuff.html?partner=rss&emc=rss Tech Tip: Signing Your Name in Digital Ink https://www.nytimes.com/2018/02/21/technology/personaltech/digital-signing-.html?partner=rss&emc=rss State of the Art: Why We May Soon Be Living in Alexa's World https://www.nytimes.com/2018/02/21/technology/amazon-alexa-world.html?partner=rss&emc=rss Venezuela Launches Virtual Currency, Hoping to Resuscitate Economy https://www.nytimes.com/2018/02/20/world/americas/venezuela-petro-currency.html?partner=rss&emc=rss Op-Ed Contributor: How to Monitor Fake News https://www.nytimes.com/2018/02/20/opinion/monitor-fake-news.html?partner=rss&emc=rss Good News: A.I. Is Getting Cheaper. That's Also Bad News. https://www.nytimes.com/2018/02/20/technology/artificial-intelligence-risks.html?partner=rss&emc=rss In Picasso's Blue Period, Scanners Find Secrets He Painted Over https://www.nytimes.com/2018/02/20/science/picasso-blue-period-scans.html?partner=rss&emc=rss AT&T Loses Bid to Obtain White House Call Logs https://www.nytimes.com/2018/02/20/technology/att-loses-bid-to-obtain-white-house-call-logs.html?partner=rss&emc=rss On Social Media, Lax Enforcement Lets Impostor Accounts Thrive https://www.nytimes.com/2018/02/20/technology/social-media-impostor-accounts.html?partner=rss&emc=rss Qualcomm, Moving to Fend Off Broadcom, Raises Bid for NXP to $44 Billion https://www.nytimes.com/2018/02/20/business/dealbook/qualcomm-nxp-broadcom.html?partner=rss&emc=rss Tech Tip: Adding Ports to a Portable Computer https://www.nytimes.com/2018/02/20/technology/personaltech/adding-ports-laptop.html?partner=rss&emc=rss After Florida School Shooting, Russian 'Bot' Army Pounced https://www.nytimes.com/2018/02/19/technology/russian-bots-school-shooting.html?partner=rss&emc=rss Fox News Plans a Streaming Service for 'Superfans' https://www.nytimes.com/2018/02/19/business/media/fox-news-streaming.html?partner=rss&emc=rss The Shift: On Russia, Facebook Sends a Message It Wishes It Hadn't https://www.nytimes.com/2018/02/19/technology/russia-facebook-trump.html?partner=rss&emc=rss Why A.I. Researchers at Google Got Desks Next to the Boss https://www.nytimes.com/2018/02/19/technology/ai-researchers-desks-boss.html?partner=rss&emc=rss Tech Tip: Finding Closed-Caption Content Online https://www.nytimes.com/2018/02/19/technology/personaltech/closed-caption-content-online.html?partner=rss&emc=rss Fact-Checking a Facebook Executive's Comments on Russian Interference https://www.nytimes.com/2018/02/19/technology/facebook-executive-russia-tweets-fact-check.html?partner=rss&emc=rss Advertising: Google Chrome Now Blocks Irksome Ads. That's a Good Thing, Right? https://www.nytimes.com/2018/02/18/business/media/google-chrome-ad-block.html?partner=rss&emc=rss Bitcoin Thieves Threaten Real Violence for Virtual Currencies https://www.nytimes.com/2018/02/18/technology/virtual-currency-extortion.html?partner=rss&emc=rss To Stir Discord in 2016, Russians Turned Most Often to Facebook https://www.nytimes.com/2018/02/17/technology/indictment-russian-tech-facebook.html?partner=rss&emc=rss
On the server side that's all you need to do. To use this approach on the client side in a browser or CEC component we need to make some accommodations to be able to use npm modules.
Let's start with a simple HTML page that loads the npm module rss-to-json and uses vue.js to list the RSS item titles in an unordered list. Since JavaScript in web browsers cannot use require as we did above to load npm modules we'll use Browserify to package up rss-to-json and all dependent modules.
Install the Browserify tool in your node.js environment using:
npm install -g browserify
Create a file called main.js to contain the brief JavaScript code to access the NY Times RSS feed and use the Vue object to map the returned item titles to an HTML <ul>.
let Feed=require('rss-to-json') Feed.load('http://feeds.nytimes.com/nyt/rss/Technology', function(err, rss) { let appTitleList = new Vue({ el: '#titlelist', data: { rssItems: rss.items } }) })
Package main.js and the npm module into a JavaScript file that will be loaded using a <script> tag in our HTML page. Use the Browserify tool as shown:
browserify main.js -o bundle.js
Create an HTML source for our page with titles, script tags and body similar to that shown. Note the <ul> in the "titlelist" <div> where vue.js maps the RSS items. I've used rss-js.html for the file name.
<!DOCTYPE html> <html> <head> <script src="bundle.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <title>Access RSS Feeds in JavaScript Demo</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Access RSS Feeds in JavaScript Demo</h1> <h2>Headlines</h2> <p>List of Headlines from NY Times - Technology RSS Feed</p> <div id="titlelist"> <ul> <li v-for="item in rssItems"> </li> </ul> </div> </body> </html>
Open the file in a browser using a URL something like file:///home/john/dev/rss-js.html. You should see a rendered page similar to that shown below.
Using the tools described above we can integrate RSS feeds in CEC using custom components. Refer to the Oracle CEC documentation on developing components for detail.
Create a new local component is CEC and synch or download the assets, render.js and design.css.
Possibly you may want to put the RSS feed URL in the component settings.html or place a UI element in the component for user input. Use Browserify as before to package rss-to-json and upload it to the component assets.
Integrating RSS feeds into JavaScript applications on server side is easy and straight forward using code available in modules such as rss-to-json. On the client side where you will likely be using a JavaScript framework such as React or possibly a simple MVVM tool like Vue.js, RSS feeds are easy to work with once they have been converted to JSON.
Previous Post