Web Services, Part X: Consuming the StockQuote: Converting the XML Response to HTML - Doc JavaScript | WebReference

Web Services, Part X: Consuming the StockQuote: Converting the XML Response to HTML - Doc JavaScript


Web Services, Part X: Consuming the StockQuote

Converting the XML Response to HTML

The stock.xsl file transforms the XML quote data to HTML. We create a table with explanatory headings, and populate it with the quote information. We define the table to have a solid border, and the column headings are bold, and underlined. The Last trading data is emphasized by filling its cell with light gray. Here is the table definition in stock.xsl:


<TABLE STYLE="border:1px solid black">
    <TR STYLE="font-size:8pt; font-family:Verdana;
      font-weight:bold; text-decoration:underline">
      <TD>Symbol</TD>
      <TD STYLE="background-color:lightgrey">Last</TD>
      <TD>Date</TD>
      <TD>Time</TD>
      <TD>Chg</TD>
      <TD>Open</TD>
      <TD>High</TD>
      <TD>Low</TD>
      <TD>Vol</TD>
      <TD>MktCap</TD>
      <TD>Prev Close</TD>
      <TD>% Chg</TD>
      <TD>Ann Range</TD>
      <TD>Earns</TD>
      <TD>P-E</TD>
      <TD>Name</TD>
    </TR>

Once the column headings are printed, we need to populate the table with the trade information, one row per symbol. We loop over the three symbols using the for-each construct of XSL:

<xsl:for-each select="//Stock">

The select attribute uses the "//" notation to search for the specified element (<Stock>) starting from the root and down to the leaf cells of the DOMDocument tree.

For each symbol found, we use the value-of construct of XSL to extract the value of each tag and put in the proper cell of the table. Here is the Date statement:

<TD><xsl:value-of select="Date"/<>/TD>

Here is the section that loops over all symbols and prints the quote information:

<xsl:for-each select="//Stock">
  <TR STYLE="font-family:Verdana; font-size:8pt; padding:0px 2px">
    <TD><xsl:value-of select="Symbol" /></TD>
    <TD STYLE="background-color:lightgrey">
      <xsl:value-of select="Last" /></TD>
    <TD><xsl:value-of select="Date" /></TD>
    <TD><xsl:value-of select="Time" /></TD>
    <TD><xsl:value-of select="Change" /></TD>
    <TD><xsl:value-of select="Open" /></TD>
    <TD><xsl:value-of select="High" /></TD>
    <TD><xsl:value-of select="Low" /></TD>
    <TD><xsl:value-of select="Volume" /></TD>
    <TD><xsl:value-of select="MktCap" /></TD>
    <TD><xsl:value-of select="PrevClose" /></TD>
    <TD><xsl:value-of select="PctChg" /></TD>
    <TD><xsl:value-of select="AnnRange" /></TD>
    <TD><xsl:value-of select="Earns" /></TD>
    <TD><xsl:value-of select="P-E" /></TD>
    <TD><xsl:value-of select="Name" /></TD>
  </TR>
</xsl:for-each>

Here is the full listing of stock.xsl:

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  version="1.0" >
<xsl:output method="html"/>
<xsl:template match="/*">
<html>
  <TABLE STYLE="border:1px solid black">
    <TR STYLE="font-size:8pt; font-family:Verdana; font-weight:bold;
      text-decoration:underline">
      <TD>Symbol</TD>
      <TD STYLE="background-color:lightgrey">Last</TD>
      <TD>Date</TD>
      <TD>Time</TD>
      <TD>Chg</TD>
      <TD>Open</TD>
      <TD>High</TD>
      <TD>Low</TD>
      <TD>Vol</TD>
      <TD>MktCap</TD>
      <TD>Prev Close</TD>
      <TD>% Chg</TD>
      <TD>Ann Range</TD>
      <TD>Earns</TD>
      <TD>P-E</TD>
      <TD>Name</TD>
    </TR>
    <xsl:for-each select="//Stock">
      <TR STYLE="font-family:Verdana; font-size:8pt; padding:0px 2px">
        <TD><xsl:value-of select="Symbol" /></TD>
        <TD STYLE="background-color:lightgrey">
          <xsl:value-of select="Last" /></TD>
        <TD ><xsl:value-of select="Date" /></TD>
        <TD><xsl:value-of select="Time" /></TD>
        <TD><xsl:value-of select="Change" /></TD>
        <TD><xsl:value-of select="Open" /></TD>
        <TD><xsl:value-of select="High" /></TD>
        <TD><xsl:value-of select="Low" /></TD>
        <TD><xsl:value-of select="Volume" /></TD>
        <TD><xsl:value-of select="MktCap" /></TD>
        <TD><xsl:value-of select="PrevClose" /></TD>
        <TD><xsl:value-of select="PctChg" /></TD>
        <TD><xsl:value-of select="AnnRange" /></TD>
        <TD><xsl:value-of select="Earns" /></TD>
        <TD><xsl:value-of select="P-E" /></TD>
        <TD><xsl:value-of select="Name" /></TD>
      </TR>
    </xsl:for-each>
  </TABLE>
</html>
</xsl:template>
</xsl:stylesheet>

Next: A Final Word

http://www.internet.com


Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: March 11, 2002
Revised: March 11, 2002

URL: http://www.webreference.com/js/column105/6.html