XSL. How to display nodes only once

Question

This is the result of the HTML output built by the XSL+XML+CSS code below that I managed to achieve up to now:

   GoPro 3 Black   |                  | GoPro 3 Silver   |
-----------------------------------------------------------------------------
| Video resolution | 4K               | Video resolution | 4K               |
|                  | 30, 25, 24       |                  | 15, 12.5         |
|                  | Ultra wide       |                  | Ultra wide       |
|                  | ...              |                  | ...              |
|                  |                  |                  |                  |
| Video format     | H.264            | Video format     | H.264            |
|                  | ...              |                  | ...              |
|                  |                  |                  |                  |

The first and the third columns come from the following XML tags (this is part of the full XML code you may find below):

<section>
    <name>Video resolution</name>
    <row>
        <value></value>
    </row>
</section>
<section>
    <name>Video format</name>
    <row>
        <value></value>
    </row>
</section>

How I can tell XSL to display the 'Video resolution' column only once? (I would like keep the first column and remove the third one).

Below the full XSL, XML, CSS code.

XSL:

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" omit-xml-declaration="yes" indent="yes" />

<xsl:template match="/">
    <html>
        <head>
             <title><xsl:value-of select="doc/page/name"/></title>
             <link rel="stylesheet" type="text/css" href="default.css" />
        </head>
        <body>
            <div class="container">
            <xsl:for-each select="doc/item">
                <div class="item">
                    <xsl:apply-templates/>
                </div>
                <xsl:text disable-output-escaping="yes">&lt;div class="clearfix:after"&gt;&lt;/div&gt;</xsl:text>
            </xsl:for-each>
            </div>
       </body>
    </html>
</xsl:template>

<!-- XML <section name> -->
<xsl:template match="doc/item/section">
     <div class="column caption">
         <strong><xsl:value-of select="name"/></strong>
     </div>
     <div class="column values">
         <xsl:for-each select="row/value">
             <xsl:value-of select="."/><br />
         </xsl:for-each>
     </div>
     <xsl:text disable-output-escaping="yes">&lt;div class="clearfix:after"&gt;&lt;/div&gt;</xsl:text>
</xsl:template>

<xsl:template match="doc/item/name">
     <p><strong><xsl:value-of select="."/></strong></p>
</xsl:template>
</xsl:stylesheet>

XML:

<?xml version="1.0" encoding="utf-8"?>
<doc>
     <page>
          <name>GoPro</name>
     </page>
     <item>
          <name>GoPro Hero 4 Black</name>  
          <section>
               <name>Video resolution</name>
               <row>
                    <value>4K</value>
                    <value>30, 25, 24</value>
                    <value>Ultra wide</value>
                    <value>3840x2160</value>
                    <note></note>
               </row>
               <row>
                    <value>4K Superview</value>
                    <value>24</value>
                    <value>Ultra wide</value>
                    <value>3840x2160</value>
                    <note></note>
               </row>
               <row>
                    <value>WVGA</value>
                    <value>240</value>
                    <value>Ultra wide</value>
                    <value>848x480</value>
                    <note></note>
               </row>
          </section>
          <section>
               <name>Video format</name>
               <row>    
                    <value>H.264 codec, .MP4 file format</value>
                    <note></note>
               </row>
          </section>
          <section>
               <name>Weight</name>
               <row>    
                    <value>88g (3.1oz)</value>
                    <value>With housing: 152g (5.4oz)</value>
                    <note></note>
               </row>
          </section>
     </item>
     <item>
          <name>GoPro Hero 4 Silver</name>
          <section>
               <name>Video resolution</name>
               <row>
                    <value>4K</value>
                    <value>15, 12.5</value>
                    <value>Ultra wide</value>
                    <value>3840x2160</value>
                    <note></note>
               </row>
               <row>
                    <value>-</value>
                    <value>-</value>
                    <value>-</value>
                    <value>-</value>
                    <note></note>
               </row>
               <row>
                    <value>WVGA</value>
                    <value>240</value>
                    <value>Ultra wide</value>
                    <value>848x480</value>
                    <note></note>
               </row>
          </section>
          <section>
               <name>Video format</name>
               <row>
                    <value>H.264 codec, .MP4 file format</value>
                    <note></note>
               </row>
          </section>
          <section>
                <name>Weight</name>
                <row>
                     <value>83g (oz)</value>
                     <value>With housing: 147g (oz)</value>
                     <note></note>
                </row>
          </section>
     </item>
 </doc>

CSS:

body {
    padding: 0px;
    margin: 0px;
}

.item {
    float: left;
}

.column {
   float: left;
   padding-bottom: 1000px;
   margin-bottom: -1000px;
}

.caption {
    width: 160px;
}

.values {
    width: 200px;
}

.container {
    overflow: hidden;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

Can you guarantee that every item has the same sections with the same names in the same order, or is it possible for some sections to be missing from some items? — Ian Roberts
Yes, every 'item' will have the same 'section(s)'. The 'name' will be immediately after the 'section'. The only tags that will certainly change are 'row' and the number of 'value' inside. — Nicero

Eric S Eric S · Accepted Answer · 2014-10-29T18:20:49

If i well understood what you try to achieve, a very simple fix could be to limit the display of the section name only for the first item.

This part in your original code is displaying the name :

<div class="column caption">
     <strong><xsl:value-of select="name"/></strong>
</div>

Add an if element :

<xsl:if test="not(parent::item/preceding-sibling::item)">
        <div class="column caption">
            <strong><xsl:value-of select="name"/></strong>
        </div>
</xsl:if>

And section/name won't be displayed anymore but for the first item (aka first column in the output). There are other solutions where you could re-design your matching flow, but this one was quick and not so dirty imho.

Note this works only if sections got the same name and same order for each item.

XSL. How to display nodes only once

1 Answers