Replace XML Value in HTML - html

Question

I have a scoreboard on my website that gets scores from an XML file. It's very easy for others to update, except for highlighting the winner.
This is a sample game from the XML file:
<game>
<month>05</month><day>25</day><year>11</year>
<type>Football</type>
<homeName>Wildcats</homeName><homeScore>45</homeScore><homeWinner></homeWinner>
<awayName>Bruins</awayName><awayScore>55</awayScore><awayWinner>y</awayWinner>
</game>
As you can see, I want them to simply check the winner. However, when it loads in HTML, I want the y to be replaced with an arrow image.
It's a Spry scoreboard, so here's the relevant HTML:
<script type="text/javascript">
var dsScoreboard = new Spry.Data.XMLDataSet("scoreboard.xml", "scoreboard/game", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
dsScoreboard.setColumnType("date", "date");
</script>
<div spry:region="dsScoreboard">
<table class="scoreboard" cellspacing="15" cellpadding="0" border="0">
<tr>
<td spry:repeat="dsScoreboard">
<table class="game" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="date month">{month}</td>
<td class="type" colspan="3">{type}</td>
</tr>
<tr>
<td class="date day">{day}</td>
<td class="winner">{awayWinner}</td>
<td class="name">{awayName}</td>
<td class="score">{awayScore}</td>
</tr>
<tr>
<td class="date year">{year}</td>
<td class="winner">{homeWinner}</td>
<td class="name">{homeName}</td>
<td class="score">{homeScore}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
So the output HTML for the winner cell should be something like:
<td class="winner"><img src="arrow.png" /></td>
instead of:
<td class="winner">y</td>
Can this be easily done? Thank you.

Answer 1

What you want is a spry:choose. I have never used spry, but it's something vaguely like this:
<td class="winner">
<span spry:choose="spry:choose">
<img src="arrow.png" spry:when="'{homeWinner}' == 'y'" />
<span spry:default="spry:default"></span>
</span>
</td>