Step 3: Looping Through Data

A version of this page is also available for

Windows Embedded CE 6.0 R3

4/8/2010

The sales data consists of three regions (West Coast, Central, and East Coast) with four quarters per region.

<data>
   <region>
      <name>West Coast</name>
      <quarter number="1" books_sold="24000"/>
      <quarter number="2" books_sold="38600"/>
      <quarter number="3" books_sold="44030"/>
      <quarter number="4" books_sold="21000"/>
   </region>
   <region>
      <name>Central</name>
      <quarter number="1" books_sold="11000"/>
      <quarter number="2" books_sold="16080"/>
      <quarter number="3" books_sold="25000"/>
      <quarter number="4" books_sold="29000"/>
   </region>
   <region>
      <name>East Coast</name>
      <quarter number="1" books_sold="27000"/>
      <quarter number="2" books_sold="31400"/>
      <quarter number="3" books_sold="40100"/>
      <quarter number="4" books_sold="30000"/>
   </region>
</data>

It would be cumbersome to handle this data using the pattern matching method described in Step 2 of the Tutorial. Fortunately, XSLT allows us to step through this data, formatting as you go. Each of the regions can be considered a data structure. They start and end with the same tag and contain identical types of information, although the data itself varies. Using XSLT, you can apply a format for every instance of a data structure, while only having to specify the formatting information once. In this example, you will also show how you can use XSLT to summarize data.

To total the sales for each region and display the total on the page

1. Open Transform.xsl.

2. Locate the following code.

         </BODY>
       </HTML>
     </xsl:template>
   </xsl:stylesheet>
   

3. Use the Copy and Paste commands to place the following text directly above the code you found in the preceding step in this procedure.

   <!--Step 3-->
   <table>
     <tr>
       <th>Region\Quarter</th>
       <xsl:for-each select="//data/region[1]/quarter">
         <th>Q<xsl:value-of select="@number"/></th>
       </xsl:for-each>
       <th>Total</th>
     </tr>
     <xsl:for-each select="//data/region">
       <tr>
         <th style="text-align:left"><xsl:value-of select="name"/></th>
         <xsl:for-each select="quarter">
           <td style="text-align:right">
             <xsl:value-of select="format-number(@books_sold,'###,###')"/>
           </td>
         </xsl:for-each>
         <td style="text-align:right;font-weight:bold;">
           <!-- Total Goes here -->
         </td>
       </tr>
     </xsl:for-each>
   </table>
   

4. Save and close Transform.xsl.

5. To view the regional sales in Internet Explorer, open Sales.xml.

   The new portion of the sales report should look like this:

   

How It Works

Some of this code contains select statements and is familiar from Step 2 of the Tutorial. However, you are doing something new here. Look at the line <xsl:for-each select="//data/region[1]/quarter>. The first part, xsl:for-each, tells the parser to do something every time it finds a pattern. The text select="//data/region[1]/quarter" tells the parser which pattern to look for. The next line, <td>Q<xsl:value-of select="@number"/></th>, tells the parser to look inside the <quarter> tag it selected just before, and get the value of number=. Because you used a for-each select command, this will be performed for every <quarter> tag in the XML. The end result is a table with a list of quarters along the top.

Adding a Totals Column

To use XML and XSL to calculate total sales

1. Open Transform.xsl in your HTML editor.

2. Delete the following text.

   <!-- Total Goes Here -->.
   

3. Replace with the following text.

   <xsl:value-of select="format-number(sum(quarter/@books_sold),'###,###')"/>
   

4. Save and close Transform.xsl.

5. To view the totals in Internet Explorer, open Sales.xml.

   There should now be a column that displays the total sales for each region:

   

   Note

   You can use the format-number() command to add a comma after the third significant digit, as shown here.

See Also

Tasks

Step 4: Adding Conditional Statements
Step 2: Matching Patterns
Tutorial: Getting Started with XSLT

Concepts

Exploring XSLT Capabilities
XSLT Developer Guide