OPML to HTML via JavaScript

October 6th, 2006. Tagged: JavaScript, OPML, Web1.0

Earlier today in a discussion with the lovely Amy Stephen, I thought of posting the RSS feeds I read. So I was thinking I would need to approach this in a good old web 1.0. way, finding a way to scrap content from the Google Reader. Luckily for me, I saw they have an Export feature. Turns out the export is in some new to me OPML format, basically an XML document. The question was to get the XML and turn it into HTML the festest way. The answer I came up with was to use JavaScript.

Demo

The demo is here, it's using my OPML doc, but you can paste yours and get the result. Further if you want to modify the HTML produced you can (using FirefoxF's JS console or Firebug, or typing javascript:... in IE's address bar) tweak the HTML "templates" I'm using. Just set the properties opml2html.html_template and opml2html.item_template.

Implementation

Implementation was a breeze. I did an opml2html class/object with one method - parse() and two attributes which are the templates for the html result. Having already experimented with getting an XML document object out of XML string, this part was a matter of copy/paste.

var doc;
// code for IE
if (window.ActiveXObject) {
    doc = new ActiveXObject("Microsoft.XMLDOM");
    doc.async = false;
    doc.loadXML(opml);
// code for Mozilla, Firefox, Opera, etc.
} else {
    var parser = new DOMParser();
    doc = parser.parseFromString(opml,"text/xml");
}

The rest is getting the attributes from the "outline" elements and replacing the values in my html templates. There are two nested outline elements and we're interested only in the inner ones, so the ones that return TRUE when calling hasChildNodes() on them are skipped.

var outlines = doc.getElementsByTagName('outline');
 
var html = '';
for (var i = 0, max = outlines.length; i < max; i++) {
 
  curr = outlines[i];
  if (!curr.hasChildNodes()) {
    title   = curr.getAttribute('title');
    htmlurl = curr.getAttribute('htmlUrl');
    xmlurl  = curr.getAttribute('xmlUrl');
    html += this.item_template.replace(/{TITLE}/, title)
            .replace(/{HTMLURL}/, htmlurl)
            .replace(/{XMLURL}/, xmlurl);
  }
 
}
var opml_title = doc.getElementsByTagName('title')[0]
                    .firstChild.nodeValue;
html = this.html_template.replace(/{ITEMS}/, html)
               .replace(/{OPMLTITLE}/, opml_title);
return html;

For the full source, check the demo, should work in IE and FF.

Tell your friends about this post: Facebook, Twitter, Google+

4 Responses

  1. Hi, Stoyan, I’ve been reading your blog for a while, cool!
    While working on this, did you consider using XSLT? ‘Cause I,ve been doing the same thing (converting XML to HTML in the browser) with XSLT and it’s quite simple. The only problem is that Opera does not support it.
    The code:

    /**
    * Transform XML document into HTML string
    *
    * @param xslStylesheet DOM object, containing the XSL transformation definition
    * @param xmlData DOM object, containing the XML to be transformed
    */
    function applyXSL(xslStylesheet,xmlData) {
    var output;
    if (browser==’ie’){
    // IE stuff
    objSrcTree = new ActiveXObject(Microsoft.XMLDOM);
    objSrcTree.async = false;
    objSrcTree.load(xmlData);

    objXSLT=new ActiveXObject(Msxml2.FreeThreadedDOMDocument.5.0);
    objXSLT.async = false;
    objXSLT.load(xslStylesheet);

    objCache = new ActiveXObject(Msxml2.XSLTemplate.5.0);
    objCache.stylesheet = objXSLT;

    var objXSLTProc = objCache.createProcessor();
    objXSLTProc.input = objSrcTree;

    objXSLTProc.transform();
    output=objXSLTProc.output
    }
    else{
    // Mozilla
    var processor = new XSLTProcessor();
    processor.importStylesheet(xslStylesheet);

    var newDocument = processor.transformToDocument(xmlData);
    var serializer = new XMLSerializer();
    output = serializer.serializeToString(newDocument);
    }
    return output;
    }

    This function expects you have previously done some browser detection and have created DOM objects for the XML document and the stylesheet.

  2. Wow! lol! OK. I gotta learn this stuff – it’s way to marvelously geeky to not jump in and partake! You are very motivating!

    Thanks Stoyan – you are the coolest and the sweetest, too!

    Amy :)

  3. Thanks Gonzo for sharrng this! I must admit, the thought of using XSLT did cross my mind, I mean that’s what it’s made for – translating documents. Actually this would have been a by-the-book example of why XSLT is useful. I find it however just a bit harder to implement and in my case I needed a quick/dirty solution. My solution is maybe shorter than what the XSL sheet alone would’ve been.

    Thanks again fo sharing the code.

    BTW, have you looked at G’s ajaxslt library? It should probably work in Opera too.

    BBTW, are you the same Gonzo from the Math High School in Sofia? You had that cool 12-string guitar? ;) Drop me an email – ssttoo at gmail

  4. [...] I think that’s about it for SAP. Otherwise, as usual, I get easily excited by different things, so I’ve been doing this and that, here and there, on my own terms, relaxing, without any deadlines preasure. [...]

Leave a Reply