Converting XML to HTML: Best Practice?
I have this XML:
<Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/> What I need to use in HTML markup:
<a href="#" data-name="Syd Mead" data-id="3412" data-ntrack="28" data-pop="8" class="pop-8"><span>Syd Mead</span></a> What is the โrightโ way to do this for the widest range of browsers? Can this be done with reliable XSLT transformation? Is it better to use a regex (unlikely) or do I need to parse an XML file, and for each <Artist> read each attribute and execute document.createElement and setAttribute manually?
The <Artist> tags are in the parent node, there are many of them. Is there any best practice for this?
It looks like the perfect candidate for XSLT - XML โโis clean and well formed. If you are concerned about browser compatibility, why not do a server side conversion?
This XSLT converts your data - you can test it here :
Initial data:
<Artists> <Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/> </Artists> XSLT:
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <xsl:for-each select="Artists/Artist"> <a href="#"> <xsl:attribute name="data-id"> <xsl:value-of select="@id"/> </xsl:attribute> <xsl:attribute name="data-ntrack"> <xsl:value-of select="@ntrack"/> </xsl:attribute> <xsl:attribute name="data-pop"> <xsl:value-of select="@pop"/> </xsl:attribute> <xsl:attribute name="data-name"> <xsl:value-of select="@name"/> </xsl:attribute> <xsl:attribute name="class"> <xsl:value-of select="concat('pop-',@pop)"/> </xsl:attribute> <span><xsl:value-of select="@name"/></span> </a> </xsl:for-each> </xsl:template> </xsl:stylesheet> I did not do this on the client side, so, unfortunately, I canโt talk about browser compatibility.
Here's a simple (no legend, no extra template, xsl:attribute , no xsl:for-each ) short and complete conversion :
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output omit-xml-declaration="yes" indent="no"/> <xsl:template match="Artist"> <a href="#" data-name="{@name}" data-id="{@id}" data-ntrack="{@ntrack}" data-pop="{@pop}" class="pop-{@pop}"> <span><xsl:value-of select="@name"/></span> </a> </xsl:template> </xsl:stylesheet> When this conversion is applied to the provided XML document:
<Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/> required, the correct result is obtained :
<a href="#" data-name="Syd Mead" data-id="3412" data-ntrack="28" data-pop="8" class="pop-8"><span>Syd Mead</span></a> Explanation . Proper use of AVT (attribute value patterns)
Here is another version of XSLT styles that is simpler in my opinion:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html"/> <xsl:template match="/*/Artist"> <a href="#" class="pop-{@pop}"> <xsl:apply-templates select="@*"/> <span><xsl:value-of select="@name"/></span> </a> </xsl:template> <xsl:template match="@*"> <xsl:attribute name="data-{name()}"> <xsl:value-of select="."/> </xsl:attribute> </xsl:template> </xsl:stylesheet> XML input
<Artists> <Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/> </Artists> HTML output
<a class="pop-8" href="#" data-name="Syd Mead" data-id="3412" data-ntrack="28" data-pop="8"> <span>Syd Mead</span> </a>