Trying to parse a simple XML list using JavaScript, but having trouble formatting it the way I need.
<TOURS>
<MONTH>
<TOUR>
<NUMBER>1</NUMBER>
<VENUE>City Name - Venue Name</VENUE>
<OTHER>Other stuff here</OTHER>
</TOUR>
<TOUR>
<NUMBER>2</NUMBER>
<VENUE>City Name - Venue Name</VENUE>
<OTHER>Other stuff here</OTHER>
</TOUR>
<TOUR>
<NUMBER>3</NUMBER>
<VENUE>City Name - Venue Name</VENUE>
<OTHER>Other stuff here</OTHER>
</TOUR>
</MONTH>
<MONTH>
<TOUR>
<NUMBER>1</NUMBER>
<VENUE>City Name - Venue Name</VENUE>
<OTHER>Other stuff here</OTHER>
</TOUR>
<TOUR>
<NUMBER>2</NUMBER>
<VENUE>City Name - Venue Name</VENUE>
<OTHER>Other stuff here</OTHER>
</TOUR>
<TOUR>
<NUMBER>3</NUMBER>
<VENUE>City Name - Venue Name</VENUE>
<OTHER>Other stuff here</OTHER>
</TOUR>
</MONTH>
Wanting to display two separate lists based on different months, but current code results in one large list of tours without separation based on months.
// Execute function when DOM is fully loaded
$(document).ready(function(){
// Access the students.xml file
$.get("xml/tourinfo.xml",{},function(xml){
// Create an HTML string
myHTMLOutput = '';
myHTMLOutput += '<div id="tours-container">';
myHTMLOutput += '<img src="img/sep.png" style="vertical-align: middle;"></img>';
// Iterate through each student tag in the XML file
$('TOUR',xml).each(function(i) {
tourNumber = $(this).find("NUMBER").text();
tourVenue = $(this).find("VENUE").text();
tourOther = $(this).find("OTHER").text();
// Build row HTML data and store in string
mydata = BuildStudentHTML(tourNumber,tourVenue,tourOther);
myHTMLOutput = myHTMLOutput + mydata;
});
myHTMLOutput += '</div>';
// Update the DIV called Content Area with the HTML string
$("#tourData").append(myHTMLOutput);
});
});
function BuildStudentHTML(tourNumber,tourVenue,tourOther){
output = '';
output += '<ul id="tour-info-container">';
output += '<li id="tourNumber">'+ tourNumber + '</li>';
output += '<img src="img/sep.png" style="vertical-align: middle;"></img>';
output += '<li id="tourVenue">'+ tourVenue +'</li>';
output += '<img src="img/sep.png" style="vertical-align: middle;"></img>';
output += '<li id="tourOther">'+ tourOther +'</li>';
output += '</ul>';
return output;
}