Published: Wednesday, April 23, 2003
Displaying Hierarchical XML Data of an Arbitrary Depth Using XSLT
By Scott Mitchell
Introduction
In June of this year, I will be teaching a three-week XML for
.NET course at the University of California - San Diego, University Extension.
In preparing the course material, I have been examining XML and related technologies quite a bit lately.
One related XML technology that is quite useful for Web developers like myself is XSLT, which stands for
eXtensible Stylesheet Language - Transformation. XSLT is an XML-formatted
syntax that translates XML data from one format to another. For example, you might have an XML file on
your Web server that contains a list of popular books on ASP.NET. This XML file might contain the following
structure:
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book price="34.95">
<title>Teach Yourself Active Server Pages 3.0 in 21 Days</title>
<authors>
<author>Mitchell</author>
<author>Atkinson</author>
</authors>
<year>1999</year>
</book>
<book price="29.95">
<title>Designing Active Server Pages</title>
<authors>
<author>Mitchell</author>
</authors>
<year>2000</year>
</book>
<book price="34.95">
<title>ASP.NET: Tips, Tutorials, and Code</title>
<authors>
<author>Mitchell</author>
<author>Mack</author>
<author>Walther</author>
<author>Seven</author>
<author>Anders</author>
<author>Nathan</author>
<author>Wahlin</author>
</authors>
<year>2001</year>
</book>
</books>
|
This data is ugly. Perhaps you want to display it in an HTML <table>. Enter XSLT!
To display this information you could create an XSLT file that specifies how this data should be transformed
into HTML content. This article does not go into the details of XSLT - for basic information on XSLT
be sure to check out the recent FAQ, What is XSLT and
how does it relate to XML?, as well as the XSL Tutorials on
XMLFiles.com.
| Applying XSLT to an XML Document |
|---|
|
There are a number of ways you can apply an XSLT stylesheet to XML data. This can be done on the
client-side (if the user is visiting the page with a browser that supports such functionality), or
on the server-side. With ASP.NET it is painfully easy to display formatted XML through the use of
the XML Web control. For more information on displaying XSLT-formatted XML through an ASP.NET Web
page, be sure to check out: FAQ: How can
I display XSL-formatted XML data in an ASP.NET Web page?
|
Displaying an XML Document with an Arbitrary Depth
XML is great at modeling hierarchical data in an easy-to-read fashion. For example, in the ASP.NET books
XML example we just examined, by glancing at the XML content you can quickly deduce that each <books>
element has an arbitrary number of <book> children elements. Similarly, each
<book> element has three child elements: <title>, <authors>,
and <year>. And, finally, each <authors> element has an
arbitrary number of <author> child elements.
If you know the depth of your XML document's hierarchy, then it is fairly straightforward to create an
XSLT file that will display all of the XML data grouped by each element level. That is, in
this live demo, you can see
how an XSLT file can be used to group each book, and then to group the authors of each book. This can
all be done with a fairly simple and straightforward
XSLT file.
However, what if your XML file has an arbitrary hierarchical depth? For example, imagine an XML document
that has information about a filesystem. This XML document might contain the following content:
<?xml version="1.0" encoding="UTF-8"?>
<filesystem>
<drive letter="C">
<folder name="Program Files">
<folder name="Visual Studio .NET">
<file size="324122">devenv.exe</file>
</folder>
<folder name="Microsoft Office">
<folder name="Word" />
<folder name="Access" />
<folder name="Outlook" />
<folder name="Excel" />
</folder>
</folder>
<folder name="Windows">
<folder name="Web" />
<folder name="System32">
<folder name="Microsoft">
<folder name="Crypto">
<folder name="RSA" />
</folder>
</folder>
<file size="28432">xcopy.exe</file>
</folder>
<file size="256192">winhelp.exe</file>
<file size="249260">explorer.exe</file>
</folder>
</drive>
<drive letter="D">
<folder name="Backup" />
</drive>
</filesystem>
|
As you can hopefully ascertain from the XML document's content, there can be <folder>
elements up to an arbitrary depth. Furthermore, in each <folder> there can be an
arbitrary number of <file> elements.
Now, the question we are faced with is this: How can we display the above XML data in an HTML Web page
so that it appears in the following format?
- C:\
- Program Files
- Visual Studio .NET
- Microsoft Office
- Windows
- Web
- System32
- winhelp.exe
- explorer.exe
- D:\
An ugly way to handle cases where there is some upper-limit on the folder depths
is to create just a ton of <xsl:for-each ...> elements, like so:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" />
<xsl:template match="/filesystem">
<ul>
<xsl:for-each select="drive">
<li><xsl:value-of select="@letter" />:\</li>
<ul>
<xsl:for-each select="folder">
<ul>
<xsl:for-each select="folder">
<ul>
<xsl:for-each select="folder">
<ul>
<xsl:for-each select="file">
<li><xsl:value-of select="text()" /></li>
</xsl:for-each>
</ul>
</xsl:for-each>
<xsl:for-each select="file">
<li><xsl:value-of select="text()" /></li>
</xsl:for-each>
</ul>
</xsl:for-each>
<xsl:for-each select="file">
<li><xsl:value-of select="text()" /></li>
</xsl:for-each>
</ul>
</xsl:for-each>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
|
Note that here we hard-coded in <xsl:for-each> elements to accomodate for up to
three levels of folder hierarchy. Of course, this idea could be extended to any set level of
depth, but it is hard to read, verbose, and will not display any folders or files that are beyond that
set level of hierarchy depth.
There is a better way, as we'll see in Part 2, one that is
much more concise and will display data for a completely arbitrary depth.
Read Part 2!
