Share this page 

Parse RSS feed from Javascript Tag(s): Varia


Internet Explorer only!
This HowTo load a RSS feed and then apply an XSLT transformation to reformat the items to be displayed in a page.

All the processing is done on the client-side. The transformation is simple, the XSL loops through the item entries and extract the title, description and pubDate.

[rss.xsl]

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:xs="http://www.w3.org/2001/XMLSchema"
     xmlns:saxon="http://saxon.sf.net/"
     version="2.0">

<xsl:template match="channel">
   <html><head></head><body>
   <h2>Real's HowTo latest entries</h2>
   <xsl:for-each select="item">
      <strong><a HREF="{link}" target="_top"><xsl:value-of select="title"/></a></strong><br/>
      <xsl:variable name="ligne">
        <xsl:value-of select="description"/>
      </xsl:variable>

      <xsl:choose>
         <xsl:when test="string-length($ligne) > 30">
            <xsl:value-of select="substring($ligne, 1, 30)" /> ...
         </xsl:when>
         <xsl:otherwise>
            <xsl:value-of select="$ligne" />
         </xsl:otherwise>
      </xsl:choose>
      <br/><small><i><xsl:value-of select="pubDate"/></i></small>
      <p/>
   </xsl:for-each>
   <p/>
   <hr/>
   </body></html>
</xsl:template>
</xsl:stylesheet>
So from the Javascript code, the RSS feed is loaded and then the XSL is applied. Finally, The result is sent to the browser.

[rss.html]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML><HEAD><TITLE>rss from js</TITLE></HEAD>

<BODY>

<STYLE type="text/css">
  BODY    {font-family:verdana; font-size:8pt}
  A       {font-family:verdana; font-size:8pt}
  A:hover {color:red}
</STYLE>

<SCRIPT type="text/javascript">
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("http://www.rgagnon.com/feed.xml")

var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("rss.xsl")

document.write(xml.transformNode(xsl))
</SCRIPT>

</BODY>
</HTML>
Try it here (IE only).

Since the transformation is done on the client-side, this can be used to solve the problem if the feed is hosted in a protected site. This a typical problem with a Sharepoint installation in a corporate environment where a site or blog access is restricted. The regular Sharepoint RSS feed webpart (which is server-side component) can not handled a feed requiring an authentication. But with this Javascript solution, Internet Explorer will handle that for us since we are running on the client-side.

But with a feed coming from a Sharepoint site, we need to modify the XSL a little bit since Sharepoint has the habit to add various HTML tags in the description section. The XSL now provides a special template to clean-up any HTML tags in description section.

[sp-rss.xsl]

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:xs="http://www.w3.org/2001/XMLSchema"
     xmlns:saxon="http://saxon.sf.net/"
     version="2.0">

<xsl:template name="deleteHtmlTags">
  <xsl:param name="html"/>
  <xsl:choose>
    <xsl:when test="contains($html, '<')">
       <xsl:value-of select="substring-before($html, '<')"/>
       <xsl:call-template name="deleteHtmlTags">
         <xsl:with-param name="html" select="substring-after($html, '>')"/>
       </xsl:call-template>
    </xsl:when>
    <xsl:otherwise>
       <xsl:value-of select="$html"/>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

<xsl:template match="channel">
   <html><head></head><body>
   <xsl:for-each select="item">

     <div align="right">
            <small>
               <b><i><xsl:value-of select="category"/></i></b>
            </small>
     </div>
     <strong><a HREF="{link}" target="_top"><xsl:value-of select="title"/></a></strong><br/>

   <xsl:variable name="ligne">
     <xsl:call-template name="deleteHtmlTags">
       <xsl:with-param name="html" select="substring(description,30)" />
     </xsl:call-template>
   </xsl:variable>

   <xsl:choose>
      <xsl:when test="string-length($ligne) > 30">
         <xsl:value-of select="substring($ligne, 1, 30)" /> ...
      </xsl:when>
      <xsl:otherwise>
            <xsl:value-of select="$ligne" />
      </xsl:otherwise>
   </xsl:choose>
   <br/><small><i><xsl:value-of select="pubDate"/></i></small>


     <p/>
   </xsl:for-each>
   <p/>
   <hr/>
    </body></html>
</xsl:template>



</xsl:stylesheet>