XSLT through JavaScript code

Whenever possible, JavaScript developers will pick JSON format for server-to-client communication, but sometimes that simply cannot be done. There are cases when 3rd-party services aren’t able to return anything other than XML (e.g. various RSS feeds) and the application needs to be able to deal with it. To make things more complex, the developed application may have multiple data sources (with different data format) and it may need to combine them. So, a mechanism for data format normalization needs to be introduced.

XSLT comes in as a simple, yet powerful tool that can satisfy this requirement. It represents a set of transformation rules that, when applied to an XML document, instruct how to convert data from one format into another one. The latter format is familiar to the rest of the application and it is able to use it internally.

Instances of DOMParser and XSLTProcessor will be used throughout examples. Although not standardized, they are available in all modern browsers. This excludes Internet Explorer 8 and lower, where an alternative DOM parser implementation exists.

The first step is to construct objects that will be used.

var domParser = new DOMParser();
var xsltProcessor = new XSLTProcessor();

The XSLT object isn’t set-up yet – it needs its set of rules to know how to transform the input XML. Those rules can be stored in a local file (on device’s file system) or in a remote file (on a server) and JavaScript code needs to get this file somehow (usually via an AJAX call against the file location).

For simplicity, code fragments will assume that this step has already happened and that XML is stored in memory in its simplest form: as a string. The raw text needs to be converted to an actual DOM representation and that work is done by the DOM parser object. Finally, the new XML document object must be sent to the XSLT processor object to finalize its initialization.

var xsltText = "...";
var xsltDoc = domParser.parseFromString(xsltText, "text/xml");
xsltProcessor.importStylesheet(xsltDoc);

At this point, the XSLT processor is prepared and a reference to it should be kept safe, since there’s no need to re-create the same object over and over again. Everything is now ready to transform XML data.

Bear in mind that if the application has multiple data sources, each with its own XML format, then a separate XSLT processor object needs to be created for each one of them. The application should be smart enough to use the appropriate processor based on the data source.

So, once again, the input XML was downloaded, stored into memory as a string and converted into a DOM object. The difference this time is that XSLT processor takes this new XML object, applies transform rules to it and returns a document fragment as the final result.

var xmlText = "...";
var xmlDoc = domParser.parseFromString(xmlText, "text/xml");
var fragment = xsltProcessor.transformToFragment(xmlDoc, document);

The document fragment, which is basically a detached DOM node, can be treated as entry data with a familiar format. It can be traversed by one of selector engines that come with popular JavaScript libraries (e.g. jQuery, Prototype, etc) or simply attached to the main document (if output from XSLT process was chosen to be HTML).

Benefit from choosing this approach is that the developer has complete control of the output format and thus can significantly speed up development. Additional advantage is native implementation of transformation objects and their methods, which execute faster than DOM object methods. This feature will probably be the most noticeable on mobile devices.

(image source: Wikipedia)