开发者

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("&nbsp;")
                } 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("&nbsp;")
            } 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]);
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜