Umaima
Umaima

Reputation: 157

How to create 'Nested List' and display in HTML format

In the below example we are trying to convert into seprate paragraph using 'XSLT 1.0' and display in the browser as a 'Nested List':

Can anyone help.

INPUT XML:

<?xml version="1.0" encoding="UTF-8"?>
<CONTENT_LIST>
<CONTENT>A. TSS Sunda Strait</CONTENT>
<CONTENT>1. Vessel Reporting Points</CONTENT>
<CONTENT>a) Southbound Reporting Line :</CONTENT>
<CONTENT>1) Crossing Latitude 05° 45’ S for ship from the Northern Part of Jawa Sea.<BR/>2) Crossing Longitude 105° 55’ E for ship from Eastern Part of Jawa Sea.</CONTENT>
<CONTENT>b) Northbound Reporting Line :</CONTENT>
<CONTENT>1) Crossing Latitude 06° 00’ S for ship from Southern Part of SundaStrait.<BR/>2) Crossing Longitude 105° 43.00’ E for ship from Lampung Bay</CONTENT>
<CONTENT>2. Precautionary Area Reporting Points</CONTENT>
<CONTENT>a) Westbound Vessel Reporting Points : 05° 54.00’ S – 105° 53.00’ E<BR/>b) Eastbound Vessel Reporting Points : 05° 52.50’ S – 105° 47.20’ E</CONTENT>
<CONTENT>3. Radio Broadcast VHF Channel 22 and 68 SUNDAREP</CONTENT>
<CONTENT>B. TSS Lombok Strait</CONTENT>
<CONTENT>1. Vessel Reporting Points</CONTENT>
<CONTENT>a) Northbound Vessel :</CONTENT>
<CONTENT>1. 08° 54.65’ S – 115° 43.48’ E<BR/>2. 08° 19.42’ S – 115° 53.96’ E</CONTENT>
<CONTENT>b) Southbound Vessel :</CONTENT>
<CONTENT>1. 08° 53.36’ S – 115° 39.02’ E<BR/>2. 08° 18.29’ S – 115° 51.18’ E</CONTENT>
<CONTENT>2. Reporting Points Southern Precaution Area</CONTENT>
<CONTENT>a) Westbound Points : 08° 38.58’ S – 115° 51.82’ E<BR/>b) Eastbound Points : 08° 37.40’ S – 115° 40.02’ E</CONTENT>
<CONTENT>3. Reporting Points Nortthern Precaution Area</CONTENT>
<CONTENT>a) Westbound Points : 08° 26.53’ S – 115° 56.15’ E<BR/>b) Eastbound Points : 08° 24.94’ S – 115° 44.35’ E</CONTENT>
<CONTENT>4. Radio Broadcast VHF Channel 68 and 16 LOMBOKREP</CONTENT>
<CONTENT>C. Format for Ship Reporting System in Traffic Separation Scheme (TSS) at Sunda Strait and Lombok Strait</CONTENT>
</CONTENT_LIST>

EXPECTED OUTPUT:

<CONTENT_LIST>
<P STYLE="margin-left:0px">A. TSS Sunda Strait</P>
<P STYLE="margin-left:10px">1. Vessel Reporting Points</P>
<P STYLE="margin-left:20px">a) Southbound Reporting Line :</CONTENT>
<P STYLE="margin-left:30px">1) Crossing Latitude 05° 45’ S for ship from the Northern Part of Jawa Sea.</P>
<P STYLE="margin-left:30px">2) Crossing Longitude 105° 55’ E for ship from Eastern Part of Jawa Sea.</P>
<P STYLE="margin-left:20px">b) Northbound Reporting Line :</P>
<P STYLE="margin-left:30px">1) Crossing Latitude 06° 00’ S for ship from Southern Part of SundaStrait.</P>
<P STYLE="margin-left:30px">2) Crossing Longitude 105° 43.00’ E for ship from Lampung Bay</P>
<P STYLE="margin-left:10px">2. Precautionary Area Reporting Points</P>
    ....................
</CONTENT_LIST>

Expected Image reference:

enter image description here

XSLT CODE:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">

<xsl:output indent="yes"/>

<xsl:template match="node()|@*">
    <xsl:copy>
        <xsl:apply-templates select="node()|@*"/>
    </xsl:copy>
</xsl:template>

<xsl:template match="/CONTENT_LIST">
    <xsl:for-each select="CONTENT/text()">
        <p><xsl:value-of select="."/></p>
    </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

Reference Linke# https://xsltfiddle.liberty-development.net/93wniTD/1

Upvotes: 1

Views: 102

Answers (1)

michael.hor257k
michael.hor257k

Reputation: 116982

The output you show is not really "nested". If you want to handle this by adjusting the margin, then you could simply examine the beginning of each line - for example:

XSLT 1.0

<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>

<xsl:template match="/CONTENT_LIST">
    <xsl:copy>
        <xsl:for-each select="CONTENT">
            <xsl:variable name="indent">
                <xsl:variable name="txt" select="translate(., '23456789bcdefghi', '11111111aaaaaaaa')" />
                <xsl:choose>
                    <xsl:when test="starts-with($txt, '1. ')">10</xsl:when>
                    <xsl:when test="starts-with($txt, 'a) ')">20</xsl:when>
                    <xsl:when test="starts-with($txt, '1) ')">30</xsl:when>
                    <xsl:otherwise>0</xsl:otherwise>
                </xsl:choose>
            </xsl:variable>
            <P STYLE="margin-left:{$indent}px">
                <xsl:value-of select="."/>
            </P>
        </xsl:for-each>
    </xsl:copy>
</xsl:template>

</xsl:stylesheet>

Note that this assumes there will be at most 9 consecutive items in each list. If there can be more, you will need to adjust the $txt variable to translate more characters and the tests to look for double-digit numbers as well.

Upvotes: 1

Related Questions