Simple XSLT at client side using Jquery / javascript

Question

I have this:

<Item name="Alpha">
    <Field name="CreationDateTime">2012-04-26</Field>
    <Field name="Material" readOnly="X"> Congress </Field>
</Item>
<Item name="Beta">
    <Field name="CreationDateTime">2012-05-26</Field>
    <Field name="Material" readOnly="X"> Democracy </Field>
</Item>
   .
   .
   .
 and so on...

And I want it to be transformed in this format:

<Item name="Alpha">
   <CreationDateTime >2012-04-26</CreationDateTime>
   <Material readOnly="X"> Congress </Material>
</Item>
<Item name="Beta">
   <CreationDateTime >2012-05-26</CreationDateTime>
   <Material readOnly="X"> Democracy </Material>
</Item>
    .
    .
    .
and so on...

I will need to do this at the client side (i.e. in javascript and jQuery). I could use a jQuery plugin for that (e.g. Google's AJAXSLT). The problem is - I have never done the XSLT before (and that too using javascript!), and have no clue how to go about it.

Answer 1

The problem is - I have never done the XSLT before (and that too using javascript!), and have no clue how to go about it.

XSLT is a language for transforming XML documents into other (mostly XML, but also HTML, plain text etc) documents. What you need is an input XML on which to work, a transformation that should be applied on the input to obtain the output and an XSLT processor to do it.

The XSLT processor can be a tool, a library, some functionality offered by frameworks or operating system or in this case (doing it with JavaScript) a browser.

You already have the XML input so you need a processor and a transformation. The processor is unfortunately browsers specific (e.g. XSLTProcessor for Mozilla, ActiveX for IE, etc) and you need to write code to test for the specific browser you are using (like it can be seen in the source code of this page for example).

Luckily though, you won't have to do that since javascript libraries like the Google AJAXSLT you mentioned hide the details underneath and expose an uniform API that you can use across browsers. So now you just need to write an XSL file to do the transformation.

Based on your sample, if the input is this:

<?xml version="1.0" encoding="UTF-8"?>
<Items>
    <Item name="Alpha">
        <Field name="CreationDateTime">2012-04-26</Field>
        <Field name="Material" readOnly="X">Congress</Field>
    </Item>
    <Item name="Beta">
        <Field name="CreationDateTime">2012-05-26</Field>
        <Field name="Material" readOnly="X">Democracy</Field>
    </Item>
</Items>

with an XSL like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/">
        <Items>
            <xsl:apply-templates />
        </Items>
    </xsl:template>

    <xsl:template match="Item">
        <Item>
            <xsl:attribute name="name">
                <xsl:value-of select="@name" />
            </xsl:attribute>
            <xsl:apply-templates />
        </Item>
    </xsl:template>

    <xsl:template match="Field">
        <xsl:variable name="fieldName" select="@name" />
        <xsl:element name="{$fieldName}">
            <xsl:if test="@readOnly">
                <xsl:copy-of select="@readOnly" />
            </xsl:if>
            <xsl:value-of select="." />
        </xsl:element>
    </xsl:template>
</xsl:stylesheet>

you get this:

<?xml version="1.0" encoding="UTF-8"?>
<Items>
    <Item name="Alpha">
        <CreationDateTime>2012-04-26</CreationDateTime>
        <Material readOnly="X">Congress</Material>
    </Item>
    <Item name="Beta">
        <CreationDateTime>2012-05-26</CreationDateTime>
        <Material readOnly="X">Democracy</Material>
    </Item>
</Items>

Hope this gets you started faster in doing XSLT in javascript.

As a final word, just make sure you concentrate on XSLT 1.0 because 2.0 is not yet supported by browsers.