Display XML in HTML website? - html

Question

I'm looking to display some XML data but am having issues.
The xml data I'm looking to display is listed below:
<?xml version="1.0" encoding="utf-8"?>
<rooms>
<not_in_rooms>
</not_in_rooms>
<room name="Room1" description="text" users="0" id="r12" passworded="false" owner_username="admin" owner_siteid="" >
</room>
<room name="Room2" description="text" users="0" id="r13" passworded="false" owner_username="admin" owner_siteid="" >
<user ip="0.0.0.0" name="user1" siteId="" gender="male" cam="0" camIsPrivate="false" mic="0" >
</user>
</room>
I want to display the Room Names (i.e. Room1, Room2) and the users in each room (i.e. user1). I found generic xml to html tutorials but they don't explain what to do when there are attributes called within each element.

Answer 1

You could use several methods, based on what you want. Probably the easiest is XSLT or parsing it with a server-side scripting language like PHP.
XSLT is probably the closest to the "standard" way to do this. You just have to link to/embed the XML file and add an element to the file stating that you should use an XSLT stylesheet. There are plenty of XSLT tutorials online. If you are wondering about how to read all the attributes, see this question.
You could also use PHP to parse and output the HTML. This would be much more complicated but also more flexible.

Answer 2

You can use pure JavaScript and DOM parser to parse your XML.
Assume you have your XML as a variable in JavaScript:
var txt = "<XML></XML>"
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}
//get take data..
xmlDoc.getElementsByTagName("Yourtagname")[0]
//Get Attribute Data...
xmlDoc.getElementsByTagName("Yourtagname")[0].getAttribute('YourAttributeInTag')
Here is a test fiddle from friends to try out.
http://jsfiddle.net/D2QpZ/