Introduction

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.

RSS Data

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.

JSON Data

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.

Client Side

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.

Content & Experience Cloud - Custom Components

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.

Summary

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.