Link to home
Start Free TrialLog in
Avatar of 2bears
2bearsFlag for New Zealand

asked on

How do I Format a list <ul> <li> using XSL - (XML into an HTML page)

Hi XSL - XML Experts
I am trying to get the list of ingredients from the Recipe1.xml file into the following format using the xsl stylesheet in the code window below. (a copy of the xml file is at the end of the xsl stylesheet code)

Desired Format:
   1 tsp yeast
   2 tsp sugar
   0.5 cup warm water
   1 cup flour

The current code in the xsl file below generates this:
              120.51tsptspcupcupyeastsugarwarm waterflour

Could someone correct or modify the xsl code below to achieve the desired list format?

Kind regards 2bears
<ul>
<li>
 
<xsl:for-each select="recipe">
<xsl:for-each select="ingredients">
<xsl:for-each select="ingredient">
<xsl:for-each select="@quantity">
<xsl:value-of select="string(.)"/>
</xsl:for-each>
</xsl:for-each>
</xsl:for-each>
</xsl:for-each>
 
<xsl:for-each select="recipe">
<xsl:for-each select="ingredients">
<xsl:for-each select="ingredient">
<xsl:for-each select="@measure">
<xsl:value-of select="string(.)"/>
</xsl:for-each>
</xsl:for-each>
</xsl:for-each>
</xsl:for-each>
 
<xsl:for-each select="recipe">
<xsl:for-each select="ingredients">
<xsl:for-each select="ingredient">
<xsl:apply-templates/>
</xsl:for-each>
</xsl:for-each>
</xsl:for-each>
 
</li>
</ul>
<!--........................................XML FILE FOLLOWS-->
<recipe>
	<title created-date="2005-06-01" modified_date="2005-06-01">Bush Bread</title>
	<number_of_servings>Makes enough for one loaf.</number_of_servings>
	<comment>Original recipe.</comment>
	<ingredients heading="Ingredients">
		<ingredient quantity="1" measure="tsp">yeast</ingredient>
		<ingredient quantity="2" measure="tsp">sugar</ingredient>
		<ingredient quantity="0.5" measure="cup">warm water</ingredient>
		<ingredient quantity="1" measure="cup">flour</ingredient>
	</ingredients>
	<preparation_instructions id="1">
        Mix the sugar, yeast and water and leave in a warm
        place for about 10 minutes. Blaa, blaa, blaa>
	<cooking_instructions>
        Cook at 180 degC for ten minutes.</cooking_instructions>
</recipe>

Open in new window

Avatar of abel
abel
Flag of Netherlands image

Can you show your desired format in XML/HTML code? I can guess, but it would be nice to know we're on the same page. Your current code is indeed incorrect, because all it does is loop the data (in a very complex way) and outputs it inside one single < li > element.
ASKER CERTIFIED SOLUTION
Avatar of zc2
zc2
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Ah, I see that zc2 also provided a solution meanwhile. Anyway, as promised, here's the output:

<body>
  <h3>Bush Bread</h3>
  <ul>
    <li>1tspyeast</li>
    <li>2tspsugar</li>
    <li>0.5cupwarm water</li>
    <li>1cupflour</li>
  </ul>
  <p>
		Mix the sugar, yeast and water and leave in a warm
	place for about 10 minutes. Blaa, blaa, blaa
		</p>
  <ul>
    <li>
			Cook at 180 degC for ten minutes.
		</li>
  </ul>
</body>

Open in new window

ScreenShot237.png
Avatar of 2bears

ASKER

Hi zc2 and abel
Thank you for the prompt and comprehensive solutions.
In the end I used a snippet from zc2's answer (see below) which worked with a minor modification to the "template match" and the first "xsl:for-each select" values.
...............................
CODE:


  •  
     


.............................
Hence, I have awarded 350 points to zc2. I have also awarded 150 points to abel for the effort evident in your answer, although nearly identical, it was slightly confusing with the
  • elements located outside the
    • elements.
    • Hope this point distribution is ok - Many thanks for both your excellent efforts.
    • Kind regards 2bears
  • I repeat your Grading-comment here, because it contained the final solution, which is good for archive readers:

    Hi zc2 and abelThank you for the prompt and comprehensive solutions.In the end I used a snippet from zc2's answer (see below) which worked with a minor modification to the "template match" and the first "xsl:for-each select" values................................CODE:<snip>, see below</snip>.............................Hence, I have awarded 350 points to zc2. I have also awarded 150 points to abel for the effort evident in your answer, although nearly identical, it was slightly confusing with the <li> elements located outside the <ul> elements.Hope this point distribution is ok - Many thanks for both your excellent efforts.Kind regards 2bears
    Thank you too and glad it helped. With the xml you provided there were no [li] outside [ul] elements (see above, I showed the output).

    I can understand your choice of solution, because in the end you clearly only needed that information and then what you showed is just most straightforward. I just wanted to show you the "xslt way" of using matching templates, where the burden of using xsl:for-each is taken away completely and you have more flexibility in processing your XML.

    -- Abel --

    <xsl:template match="/">
      <ul>
        <xsl:for-each select="recipe/ingredients/ingredient">
          <li>
            <xsl:value-of select="@quantity"/><xsl:text> </xsl:text>
            <xsl:value-of select="@measure"/><xsl:text> </xsl:text>
            <xsl:value-of select="."/>
          </li>
        </xsl:for-each>
      </ul>
    </xsl:template>
    

    Open in new window