Parsing Google News RSS with Javascript

by Amos Wong

HTML

<ul id='target'></ul>









<script id="xmldata" type="plain/text">
  <rss version="2.0">
    <channel>
      <generator>NFE/1.0</generator>
      <title>obama - Google News</title>
      <link>http://news.google.com/news?hl=en&amp;pz=1&amp;ned=us&amp;q=obama&amp;num=10&amp;topic=topics</link>
      <language>en-US</language>
      <webMaster>news-feedback@google.com</webMaster>
      <copyright>&amp;copy;2017 Google</copyright>
      <pubDate>Thu, 30 Mar 2017 17:44:06 GMT</pubDate>
      <lastBuildDate>Thu, 30 Mar 2017 17:44:06 GMT</lastBuildDate>
      <image>
        <title>obama - Google News</title>
        <url>https://ssl.gstatic.com/news-static/img/logo/en_us/news.gif</url>
        <link>http://news.google.com/news?hl=en&amp;pz=1&amp;ned=us&amp;q=obama&amp;num=10&amp;topic=topics</link>
      </image>
      <item>
        <title>Ex-Obama official: I was concerned about Russian meddling &apos;cover-up&apos; after the election - CNBC</title>
        <link>http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNHEYJq_qrlhX9qmIUvWrN2PMeXd6w&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;cid=52779442507706&amp;ei=5kPdWLjDG8yc8gXohpOYBg&amp;url=http://www.cnbc.com/2017/03/30/ex-obama-official-i-was-concerned-about-russian-meddling-cover-up-after-the-election.html</link>
        <guid isPermaLink="false">tag:news.google.com,2005:cluster=http://www.cnbc.com/2017/03/30/ex-obama-official-i-was-concerned-about-russian-meddling-cover-up-after-the-election.html</guid>
        <pubDate>Thu, 30 Mar 2017 14:49:05 GMT</pubDate>
        <description>&lt;table border=&quot;0&quot; cellpadding=&quot;2&quot; cellspacing=&quot;7&quot; style=&quot;vertical-align:top;&quot;&gt;&lt;tr&gt;&lt;td width=&quot;80&quot; align=&quot;center&quot; valign=&quot;top&quot;&gt;&lt;font style=&quot;font-size:85%;font-family:arial,sans-serif&quot;&gt;&lt;a
         ...

CSS

/* Styling for demo page */

#target ul {
  padding-left: 0;
}

#target > li {
  background-color: white;
  list-style: none;
  margin: 10px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.5s;
  opacity: 0.8;
}

#target > li:hover {
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.5s;
  opacity: 1;
}

#target > li > a {
  text-decoration: none;
  color: black;
  padding: 15px;
  display: block;
  background-color: #d8f1db;
}

#target .lh {
  margin-top: -45px;
}

JavaScript

// Assuming there are somewhere that you can get Google RSS
var xmlData = document.getElementById('xmldata').innerHTML;

// [1] Parse the xml feed into an array of JS objects
function parseData(data) {
  parser = new DOMParser();
  var xmlDoc = parser.parseFromString(data, "text/xml");

  // Convert collection to array
  // getElementsByTagName returns a collection/NodeList instead of an array.
  // It will be more convenient if we could use it like an array.
  var items = Array.from(xmlDoc.getElementsByTagName('item'));

  var feeds = [];
  items.forEach(function(item) {
    feeds.push({
      title: getNode(item, 'title'),
      link: getNode(item, 'link'),
      pubDate: getNode(item, 'pubDate'),
      description: getNode(item, 'description'),
    });
  });
  return feeds;
}
var googleFeeds = parseData(xmlData);

// [2] Using the feeds array
// This code shows how the data can be accessed
var target = document.getElementById('target');
googleFeeds.forEach(function(item) {
  var itemList = document.createElement('li');
  var itemAnchor = document.createElement('a');
  var itemParagraph = document.createElement('p');
  itemAnchor.setAttribute('target', '_blank');

  itemAnchor.setAttribute('href', item.link); // obtaining the link
  itemAnchor.innerText = item.title; // obtaining the title
  itemParagraph.innerHTML = item.description; // obtaining the title

  itemList.appendChild(itemAnchor);
  itemList.appendChild(itemParagraph);
  target.appendChild(itemList);
});

// Retrieve the data of a specific tag
function getNode(node, tagToRetrieve) {
  var htmlData = node.getElementsByTagName(tagToRetrieve)[0].innerHTML;
  return _.unescape(htmlData); // decode HTML entities, see lodash/underscore
}