Using a for loop to iterate through xml

Question

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.

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

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>

The Problem is the id of each tag, in your code you are replacing the first set of values while every time iterating the loop. You selecting the element with id's title date and so.They are same in all the element , They must be unique. — iDroid
– iDroid, Commented Mar 20, 2012 at 4:50

metalfight - user868766 · Accepted Answer · 2012-03-20 06:23:40Z

1

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

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

answered Mar 20, 2012 at 6:23

metalfight - user868766

2,7601 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brian Hauger Over a year ago

I did have parent nodes in the original xml it just didn't copy correctly.

metalfight - user868766 Over a year ago

Are you still getting the issues with above code using jquery ??

Suraj Rao · Accepted Answer · 2023-04-20 04:50:12Z

0

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

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

How to use XMLPullParser

edited Apr 20, 2023 at 4:50

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Mar 20, 2012 at 3:50

Sadeshkumar Periyasamy

4,9281 gold badge28 silver badges32 bronze badges

Collectives™ on Stack Overflow

Using a for loop to iterate through xml

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related