Accessing RSS Feeds in JavaScript

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>

</link>
<guid isPermaLink="true">

</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.

RSS-XML-data

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, "\n", item.link, "\n")
   }
})

looks like the conversion is working fine.

Dropbox Files for I.P.O., and Other 'Unicorns' Are Watching 
  

U.S. Blocks a Chinese Deal Amid Rising Tensions Over Technology 
  

Bits: Dai and Jack's Week in Tech: Don't Trust the Internet 
  

Plumbing Problem Shows Powers and Limits of 3 Tax Programs 
  

Tech Tip: Organizing Pictures With Words 
  

Tech Tip: Leaping Over the Language Barrier 
  

Tech We're Using: Limiting the Influence of Tech When You Report on It 
  

Bahrain Activist Gets 5-Year Sentence for 'Insulting' Tweets 
  

Tech Fix: In an Era of 'Smart' Things, Sometimes Dumb Stuff Is Better 
  

Tech Tip: Signing Your Name in Digital Ink 
  

State of the Art: Why We May Soon Be Living in Alexa's World 
  

Venezuela Launches Virtual Currency, Hoping to Resuscitate Economy 
  

Op-Ed Contributor: How to Monitor Fake News 
  

Good News: A.I. Is Getting Cheaper. That's Also Bad News. 
  

In Picasso's Blue Period, Scanners Find Secrets He Painted Over 
  

AT&T Loses Bid to Obtain White House Call Logs 
  

On Social Media, Lax Enforcement Lets Impostor Accounts Thrive 
  

Qualcomm, Moving to Fend Off Broadcom, Raises Bid for NXP to $44 Billion 
  

Tech Tip: Adding Ports to a Portable Computer 
  

After Florida School Shooting, Russian 'Bot' Army Pounced 
  

Fox News Plans a Streaming Service for 'Superfans' 
  

The Shift: On Russia, Facebook Sends a Message It Wishes It Hadn't 
  

Why A.I. Researchers at Google Got Desks Next to the Boss 
  

Tech Tip: Finding Closed-Caption Content Online 
  

Fact-Checking a Facebook Executive's Comments on Russian Interference 
  

Advertising: Google Chrome Now Blocks Irksome Ads. That's a Good Thing, Right? 
  

Bitcoin Thieves Threaten Real Violence for Virtual Currencies 
  

To Stir Discord in 2016, Russians Turned Most Often to Facebook 
 

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">
                    {{ item.title }}
                </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.

rss-vue-js-list

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.

CEC-component-assets

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.

Add Your Comment