Using js to pull specific xml data
I'm trying to create a site that will pull xml nodes into html using xmlhttprequest.
I want to display the data in tables, the problem lies in selecting between the two different nodes.
In my xml I have two nodes. filmsincinemas and filmsfuturereleases, which both have 4 child nodes. I have written javascript to read the xml file and pull in the film node and its child data, but it pulls in data for every film node. I want to be able to pull in filmsincinemas and filmsfuturereleases separately.
My XML is as follows ->
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<xmlRoot>
<filmplaylist>
<filmsincinemas>
<film>
<name><![CDATA[Film 1]]></name>
<website>http://www.movielink.com/</website>
<video>trailer1.flv</video>
<hd></hd>
</film>
<film>
<name><![CDATA[Film 2]]></name>
<website>http://www.movielink.com/</website>
<video>trailer2.flv</video>
<hd></hd>
</film>
<film>
<name><![CDATA[Film 3]]></name>
<website>http://www.movielink.com/</website>
<video>trailer3.flv</video>
<hd></hd>
</film>
</filmsincinemas>
<filmsfuturereleases>
<film>
<name><![CDATA[Film 4]]></name>
<website>http://www.movielink.com/</website>
<video>trailer4.flv</video>
开发者_如何学编程 <hd>trailer4hd.flv</hd>
</film>
<film>
<name><![CDATA[Film 5]]></name>
<website>http://www.movielink.com/</website>
<video>trailer5.flv</video>
<hd>trailer5hd.flv</hd>
</film>
<film>
<name><![CDATA[Film 6]]></name>
<website>http://www.movielink.com/</website>
<video>trailer6.flv</video>
<hd>trailer6hd.flv</hd>
</film>
</filmsfuturereleases>
</filmplaylist>
</xmlRoot>
My html/js is as follows ->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XML test</title>
<!-- XML Connect -->
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xml/main.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
</script>
<!-- XML Connect END -->
</head>
<body>
<div>
<table cellspacing="0" cellpadding="0" border="1">
<script>
//Set X Var to parent node
var x=xmlDoc.getElementsByTagName("film");
//'For each' loop
for (i=0;i<x.length;i++)
{
//Begin Table Row and TD
document.write("<tr><td>");
//If Node is empty
if (x[i].getElementsByTagName("website")[0].childNodes.length == 0) {
//Print space
document.write(" ")
} else {
//Print node
document.write(x[i].getElementsByTagName("website")[0].childNodes[0].nodeValue);
}
//Close row and TD
document.write("</td><td>");
//Same loop as previous
if (x[i].getElementsByTagName("name")[0].childNodes.length) {
document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
} else {
x = "none"
}
//Close TD and Row
document.write("</td></tr>");
}
</script>
</table>
</div>
</body>
</html>
Thanks in advance!
Your Javascript Code is not very good. But it seems to be very simple to accomplish what you want. This should work.
function getTable(xmlDoc){
//Set X Var to parent node
var x=xmlDoc.getElementsByTagName("film");
//'For each' loop
for (i=0;i<x.length;i++)
{
//Begin Table Row and TD
document.write("<tr><td>");
//If Node is empty
if (x[i].getElementsByTagName("website")[0].childNodes.length == 0) {
//Print space
document.write(" ")
} else {
//Print node
document.write(x[i].getElementsByTagName("website")[0].childNodes[0].nodeValue);
}
//Close row and TD
document.write("</td><td>");
//Same loop as previous
if (x[i].getElementsByTagName("name")[0].childNodes.length) {
document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
} else {
x = "none"
}
//Close TD and Row
document.write("</td></tr>");
}
}
// Will print filmsfuturereleases
getTable(xmlDoc.getElementsByTagName("filmsfuturereleases")[0]);
// Will print filmsincinemas
getTable(xmlDoc.getElementsByTagName("filmsincinemas")[0]);
精彩评论