2012-03-20 245 views
0

我正在嘗試使用for循環遍歷XML文檔並將數據放入網頁中。我想要這個代碼要做的就是取出XML中的前4項,並顯示它們的標題,日期,時間和描述。我目前的代碼看起來像這樣。使用for循環遍歷xml

<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> 

而不正確的輸出看起來像這樣。

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

What: 
When: @ 
Description: 

What: 
When: @ 
Description: 

What: 
When: @ 
Description:

的第一項是不正確的,因爲它是在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> 

+0

也請添加events.xml在這個問題 – 2012-03-20 03:50:38

+0

問題是每個標籤的'id',在你的代碼替換的第一組值,而每一次迭代循環。你選擇id爲'title'' date'的元素,因此它們在所有元素中都是相同的,它們必須是唯一的。 – iDroid 2012-03-20 04:50:12

回答

1

我相信這應該是你的父節點事件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> 
+0

我確實有原始xml中的父節點,它只是沒有正確複製。 – 2012-03-20 22:29:14

+0

你是否仍然使用jquery獲得上述代碼的問題? – 2012-03-21 06:26:58

0

入住events.xml,您指定的標籤,例如標題,日期..

解析XML使用Android中的XMLPullParser更加有效和簡單使用。

How to use XMLPullParser