Question

I’ve come up against an XSLT conundrum – you can’t open an element in one conditional statement and close it in another. I see apparently related questions about this elsewhere on Stackoverflow, but the answers are a bit baffling to an XSLT beginner of low brain wattage.

Basically I’m trying to display items from my XML in columns across the page. I’m just trying to do 2 columns at the moment, though I’d like a solution in which the number of columns isn’t hardcoded.

My XML data’s like this, with about 100 nodes:

   <?xml version="1.0" encoding="UTF-8"?>
    <response>
        <node type="category">
            <collection>
                <node>
                    <articleId>1</articleId>
                    <headline>Merry Christmas says Google as it unveils animated Jingle Bells Doodle</headline>
                </node>
                <node>
                    <articleId>2</articleId>
                    <headline>Google activating 700,000 Android phones every day</headline>
                </node>
                <node>
                    <articleId>3</articleId>
                    <headline>Google attacked by music industry over 'broken pledges' on illegal downloading</headline>
                </node>
            </collection>
        </node>
    </response>

I’d like to translate this into something like:

    <div>
        <div class="left">
            [ the articleId ]
            [ the headline ]
        </div>
        <div class="right">
            [ the articleId ]
            [ the headline ]
        </div>
    </div>

with article 1 on the left, article 2 on the right, article 3 in the next row on the left, etc. etc.

We’ve tried XSLT like this

<xsl:for-each select="$collection/spi:node[(position() mod $columns) != 0]">
<xsl:variable name="pos" select="position()"/>
<xsl:variable name="node" select="."/>
<div>
    <div class="left">
        <xsl:value-of select="../spi:node[$pos]/spi:articleId"/>]
        <xsl:value-of select="../spi:node[$pos]/spi:headline"/>
    </div>
    <div class="right">
        <xsl:value-of select="../spi:node[$pos + 1]/spi:articleId"/>
        <xsl:value-of select="../spi:node[$pos + 1]/spi:headline"/>
    </div>
</div>
</xsl:for-each>

But this only results in empty divs and weird repetitions of articles. Can any XSLT guru point us in the right direction?

Cheers

Answer 1

If you were to write out the value of your $pos variable, you will find it goes 1, 2, 3… etc, and not 1, 3,… which is what you may be expecting. This is why you are getting the repetition, I think.

In fact, there is no need to look for the node using the $pos variable, because you will already be positioned on the first node in the pair each time, so all you need to do is something like this

  <xsl:for-each select="$collection/spi:node[(position() mod $columns) != 0]">
     <div>
        <div class="left">
           <xsl:value-of select="articleId"/>
           <xsl:value-of select="headline"/>
        </div>
        <div class="right">
           <xsl:value-of select="following-sibling::spi:node[1]/articleId"/>
           <xsl:value-of select="following-sibling::spi:node[1]/headline"/>
        </div>
     </div>
  </xsl:for-each>

Do note, it is usually best practise to use xsl:apply-templates, rather than xsl:for-each, so you could re-write it like this:

<xsl:template match="/">
   <xsl:variable name="collection" select="response/node/collection"/>
   <xsl:apply-templates 
      select="$collection/spi:node[(position() mod $columns) != 0]" mode="group"/>
</xsl:template>

<xsl:template match="node" mode="group">
   <div>
      <div class="left">
         <xsl:call-template name="spi:node"/>
      </div>
      <div class="right">
         <xsl:apply-templates select="following-sibling::spi:node[1]"/>
      </div>
   </div>
</xsl:template>

<xsl:template name="node" match="node">
   <xsl:value-of select="articleId"/>
   <xsl:value-of select="headline"/>
</xsl:template>