?
Solved

Outputting nicer HTML from XML using XSL

Posted on 2011-10-16
2
Medium Priority
?
281 Views
Last Modified: 2013-11-18
I'm calling the following XML feed;

http://www.google.co.uk/ig/api?weather=sydney

<?xml version="1.0"?>
<xml_api_reply version="1">
  <weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0">
    <forecast_information>
      <city data="Sydney, NSW"/>
      <postal_code data="sydney"/>
      <latitude_e6 data=""/>
      <longitude_e6 data=""/>
      <forecast_date data="2011-10-17"/>
      <current_date_time data="2011-10-17 17:07:00 +0000"/>
      <unit_system data="US"/>
    </forecast_information>
    <current_conditions>
      <condition data="Partly Cloudy"/>
      <temp_f data="63"/>
      <temp_c data="17"/>
      <humidity data="Humidity: 45%"/>
      <icon data="/ig/images/weather/partly_cloudy.gif"/>
      <wind_condition data="Wind: S at 22 mph"/>
    </current_conditions>
    <forecast_conditions>
      <day_of_week data="Mon"/>
      <low data="54"/>
      <high data="64"/>
      <icon data="/ig/images/weather/sunny.gif"/>
      <condition data="Clear"/>
    </forecast_conditions>
    <forecast_conditions>
      <day_of_week data="Tue"/>
      <low data="52"/>
      <high data="64"/>
      <icon data="/ig/images/weather/mostly_sunny.gif"/>
      <condition data="Mostly Sunny"/>
    </forecast_conditions>
    <forecast_conditions>
      <day_of_week data="Wed"/>
      <low data="54"/>
      <high data="72"/>
      <icon data="/ig/images/weather/sunny.gif"/>
      <condition data="Clear"/>
    </forecast_conditions>
    <forecast_conditions>
      <day_of_week data="Thu"/>
      <low data="59"/>
      <high data="77"/>
      <icon data="/ig/images/weather/sunny.gif"/>
      <condition data="Clear"/>
    </forecast_conditions>
  </weather>
</xml_api_reply>

Open in new window



Using this XSL

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="*/*">
        <div>
            <xsl:attribute name="id">
                <xsl:apply-templates select="." mode="id"/>
            </xsl:attribute>
            <xsl:apply-templates select="node()|@*"/>
        </div>
    </xsl:template>
    <xsl:template match="postal_code|latitude_e6|longitude_e6|temp_f"/>
    <xsl:template match="*" mode="id">
        <xsl:value-of select="concat(name(),'_data')"/>
    </xsl:template>
    <xsl:template match="forecast_information|current_conditions|
                         forecast_conditions|icon|forecast_date" mode="id">
        <xsl:value-of select="name()"/>
    </xsl:template>
</xsl:stylesheet>

Open in new window



Outputs this

<div id="weather_data">000100<div id="forecast_information"><div id="city_data">Sydney, NSW</div><div id="postal_code_data">sydney</div><div id="latitude_e6_data"></div><div id="longitude_e6_data"></div><div id="forecast_date">2011-10-17</div><div id="current_date_time_data">2011-10-17 17:30:00 +0000</div><div id="unit_system_data">US</div></div><div id="current_conditions"><div id="condition_data">Partly Cloudy</div><div id="temp_f_data">63</div><div id="temp_c_data">17</div><div id="humidity_data">Humidity: 48%</div><div id="icon">/ig/images/weather/partly_cloudy.gif</div><div id="wind_condition_data">Wind: S at 21 mph</div></div><div id="forecast_conditions"><div id="day_of_week_data">Mon</div><div id="low_data">54</div><div id="high_data">64</div><div id="icon">/ig/images/weather/sunny.gif</div><div id="condition_data">Clear</div></div><div id="forecast_conditions"><div id="day_of_week_data">Tue</div><div id="low_data">52</div><div id="high_data">64</div><div id="icon">/ig/images/weather/mostly_sunny.gif</div><div id="condition_data">Mostly Sunny</div></div><div id="forecast_conditions"><div id="day_of_week_data">Wed</div><div id="low_data">54</div><div id="high_data">72</div><div id="icon">/ig/images/weather/sunny.gif</div><div id="condition_data">Clear</div></div><div id="forecast_conditions"><div id="day_of_week_data">Thu</div><div id="low_data">59</div><div id="high_data">77</div><div id="icon">/ig/images/weather/sunny.gif</div><div id="condition_data">Clear</div></div></div>

Open in new window


How do I change the XSL to ouput better formatted HTML, as per below?

<div id="weather_data">000100
  <div id="forecast_information">
    <div id="city_data">Sydney, NSW</div>
    <div id="postal_code_data">sydney</div>
    <div id="latitude_e6_data"></div>
    <div id="longitude_e6_data"></div>
    <div id="forecast_date">2011-10-17</div>
    <div id="current_date_time_data">2011-10-17 17:30:00 +0000</div>
    <div id="unit_system_data">US</div>
  </div>
  <div id="current_conditions">
    <div id="condition_data">Partly Cloudy</div>
    <div id="temp_f_data">63</div>
    <div id="temp_c_data">17</div>
    <div id="humidity_data">Humidity: 48%</div>
    <div id="icon">/ig/images/weather/partly_cloudy.gif</div>
    <div id="wind_condition_data">Wind: S at 21 mph</div>
  </div>
  <div id="forecast_conditions">
    <div id="day_of_week_data">Mon</div>
    <div id="low_data">54</div>
    <div id="high_data">64</div>
    <div id="icon">/ig/images/weather/sunny.gif</div>
    <div id="condition_data">Clear</div>
  </div>
  <div id="forecast_conditions">
    <div id="day_of_week_data">Tue</div>
    <div id="low_data">52</div>
    <div id="high_data">64</div>
    <div id="icon">/ig/images/weather/mostly_sunny.gif</div>
    <div id="condition_data">Mostly Sunny</div>
  </div>
  <div id="forecast_conditions">
    <div id="day_of_week_data">Wed</div>
    <div id="low_data">54</div>
    <div id="high_data">72</div>
    <div id="icon">/ig/images/weather/sunny.gif</div>
    <div id="condition_data">Clear</div>
  </div>
  <div id="forecast_conditions">
    <div id="day_of_week_data">Thu</div>
    <div id="low_data">59</div>
    <div id="high_data">77</div>
    <div id="icon">/ig/images/weather/sunny.gif</div>
    <div id="condition_data">Clear</div>
  </div>
</div>

Open in new window

0
Comment
Question by:sonic1234
2 Comments
 
LVL 3

Accepted Solution

by:
varontron earned 2000 total points
ID: 36977563
Hi,

Add this after your xsl:stylesheet opening tag:

<xsl:output method="html" indent="yes"/>

Open in new window


That should work.
0
 

Author Closing Comment

by:sonic1234
ID: 36977570
Perfect, thank you.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question