使用for循环遍历xml

I am trying to use a for loop to iterate through an XML document and place the data in the webpage. What I want this code to do is take the first 4 entries in the XML and display their title, date, time and description. The code I currently have looks like this.

我试图使用for循环迭代XML文档并将数据放在网页中。我想要这个代码做的是获取XML中的前4个条目并显示它们的标题，日期，时间和描述。我目前的代码看起来像这样。

<script type="text/javascript">
        xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","events.xml",false);
        xmlhttp.send();
        xmlDoc=xmlhttp.responseXML;
        var i = 0;
        for( i = 0; i <4; i++){

        document.write("<div style=\"display:block;padding-left:5px;\">");
        document.write("<br/>");
        document.write("<strong>What:</strong> <span id=\"title\">  </span>");
        document.write("<br/>");
        document.write("<strong>When:</strong> <span id=\"date\"></span> @ <span id=\"time\"></span>");
        document.write("<br/>");
        document.write("<strong>Description:</strong> <span id=\"descr\"></span><br/></div>");

        document.getElementById("title").innerHTML = xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue;
        document.getElementById("date").innerHTML = xmlDoc.getElementsByTagName("date")[i].childNodes[0].nodeValue;
        document.getElementById("time").innerHTML =xmlDoc.getElementsByTagName("time")[i].childNodes[0].nodeValue;
        document.getElementById("descr").innerHTML =xmlDoc.getElementsByTagName("descr")[i].childNodes[0].nodeValue;}


    </script>

And the incorrect output looks like this.

不正确的输出看起来像这样。

What: Relay for Life Bingo
When: N/A @ N/A
Description: N/A

What: 
When: @ 
Description: 

What: 
When: @ 
Description: 

What: 
When: @ 
Description:

The first entry is not correct because it is the fourth element in the XML file and as you can see the rest is blank. I am new to XML so this is probably some beginners mistake but I would appreciate some feedback on how to get this to work.

第一个条目不正确，因为它是XML文件中的第四个元素，您可以看到其余条目为空白。我是XML的新手，所以这可能是一些初学者的错误，但我希望得到一些关于如何使其工作的反馈。

events.xml

<event>
    <title>Relay for Life Wristband Sale</title>
    <date>March 26 &amp; 28 </date>
    <time>11 A.M - 3 P.M.</time>
    <descr>N/A</descr>
</event>

<event>
    <title>SHPE/SWE/EC/IEEE Dodgeball Event</title>
    <date>April 1 </date>
    <time>N/A</time>
    <descr>N/A</descr>
</event>

<event>
    <title>CH2MHILL Social/GBM</title>
    <date>April 2</date>
    <time>N/A</time>
    <descr>N/A</descr>
</event>

<event>
    <title>Relay for Life Bingo</title>
    <date>N/A</date>
    <time>N/A</time>
    <descr>N/A</descr>
</event>

<event>
    <title></title>
    <date></date>
    <time></time>
    <descr></descr>
</event>

<event>
    <title></title>
    <date></date>
    <time></time>
    <descr></descr>
</event>

<event>
    <title></title>
    <date></date>
    <time></time>
    <descr></descr>
</event>

2 个解决方案

#1

I believe this should be you events.xml with parent node events.

我相信这应该是带有父节点事件的events.xml。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<events>
<event>
<title>Relay for Life Wristband Sale</title>
<date>March 26 &amp; 28 </date>
<time>11 A.M - 3 P.M.</time>
<descr>N/A</descr>
</event>
<event>
<title>SHPE/SWE/EC/IEEE Dodgeball Event</title>
<date>April 1 </date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title>CH2MHILL Social/GBM</title>
<date>April 2</date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title>Relay for Life Bingo</title>
<date>N/A</date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
</events>

Use Jquery, see the below code with your XML. It will easy for you.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
$.get('events.xml', function(d){

$(d).find('event').each(function(){
    var $entry = $(this);
    var title = $entry.find('title').text();
    alert(title);
})
}); 
</script>
</body>
</html>

#2

Check in events.xml, you have specified tags such title, date..

检查events.xml，你有指定标签，如标题，日期..

To parse XML use XMLPullParser in Android which is more effective and easy to use.

要解析XML，请在Android中使用XMLPullParser，它更有效且易于使用。

How to use XMLPullParser

如何使用XMLPullParser

#1