[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Display XML in HTML Table and remove underscores

Posted on 2011-10-23
5
Medium Priority
?
528 Views
Last Modified: 2012-05-12
I have an xml file that I want to display in a HTML table. The XML file contains underscores in place of whitespace. I am trying to display 'Room Area 1' as opposed to 'Room_Area_1'

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<MyData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
      <PercentageComplete>
            <RoomArea>Activities</RoomArea>
            <Percent>51.22</Percent>
      </PercentageComplete>
      <PercentageComplete>
            <RoomArea>Room_Area_1</RoomArea>
            <Percent>62.82</Percent>
      </PercentageComplete>
      <PercentageComplete>
            <RoomArea>Room_Area_2</RoomArea>
            <Percent>82.67</Percent>
      </PercentageComplete>
      <PercentageComplete>
            <RoomArea>Room_Area_3</RoomArea>
            <Percent>74.12</Percent>
      </PercentageComplete>
      <PercentageComplete>
            <RoomArea>Room_Area_4</RoomArea>
            <Percent>70.79</Percent>
      </PercentageComplete>
      <PercentageComplete>
            <RoomArea>Room_Area_5</RoomArea>
            <Percent>77.78</Percent>
      </PercentageComplete>
      <PercentageComplete>
            <RoomArea>Room_Area_6</RoomArea>
            <Percent>68.6</Percent>
      </PercentageComplete>
      <PercentageComplete>
            <RoomArea>Room_Area_7</RoomArea>
            <Percent>87.32</Percent>
      </PercentageComplete>
      <PercentageComplete>
            <RoomArea>Room_Area_8</RoomArea>
            <Percent>49.44</Percent>
      </PercentageComplete>
      <PercentageComplete>
            <RoomArea>Room_Area_9</RoomArea>
            <Percent>68.48</Percent>
      </PercentageComplete>
      <PercentageComplete>
            <RoomArea>Room_Area_10</RoomArea>
            <Percent>41.58</Percent>
      </PercentageComplete>
</MyData>

Can someone please show me the correct html to output this table without displaying the underscores such as 'Room_Area_1' into 'Room Area 1'
0
Comment
Question by:Swn-Y-Mor
  • 2
  • 2
5 Comments
 

Author Comment

by:Swn-Y-Mor
ID: 37013809
forgot to mention - 2 column table required with first column heading as 'RoomArea' and second column heading as 'Percent'
0
 
LVL 43

Accepted Solution

by:
Rob earned 1000 total points
ID: 37015528
I've set this up here for you: http://jsfiddle.net/rjurd/G2qpN/

essentially you just replace the underscore in the text using regular expressions
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 37016251
You don't really indicate which technology you are using

In XSLT you would use translate(., '_', ' ') as in the below example
(the below example is a full working XSLT for getting your XML into a HTML table)

In JavaScript you would use roomarea.replace("_", " ")
given that roomarea is the string value of your element content
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="1.0">
    <xsl:template match="MyData">
        <html>
            <body>
                <table border="1">
                    <xsl:apply-templates select="PercentageComplete"/>
                </table>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="PercentageComplete">
        <tr>
            <td><xsl:value-of select="translate(RoomArea, '_', ' ')"/></td>
            <td><xsl:value-of select="Percent"/></td>
        </tr>
    </xsl:template>
 </xsl:stylesheet>

Open in new window

0
 
LVL 43

Expert Comment

by:Rob
ID: 37016343
The replace Function only replaces the first occurrence unless regular expressions are used
0
 
LVL 60

Assisted Solution

by:Geert Bormans
Geert Bormans earned 1000 total points
ID: 37016356
correct, thanks for pointing that out.
we need to add the g modifier than too

roomarea.replace( /_/g, " " )
would be the correct version of my javascript example

thanks tagit
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

873 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