CODEWITHSUNDEEP
javascriptjqueryhtmlcssxml
Anks
Anks

Reputation: 485

display xml data using javascript

I have a simple xml list I want to parse using javascript but it isnt creating the list the way I want it to.

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

I want to display them in two separate lists based on the different months but what happens is using the code below, it creates one big list of the tours rather than two separate lists based on the months.

// Start function when DOM has completely loaded 
$(document).ready(function(){ 

// Open the students.xml file
$.get("xml/tourinfo.xml",{},function(xml){

    // Build an HTML string
    myHTMLOutput = '';
    myHTMLOutput += '<div id="tours-container">';
    myHTMLOutput += '<img src="img/sep.png" style="vertical-align: middle;"></img>';

    // Run the function for each student tag in the XML file
    $('TOUR',xml).each(function(i) {
        //tourMonth = $(this).find("TOUR MONTH").text();
        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){

// Build HTML string and return
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;
}

Upvotes: 1

Views: 1554

Answers (1)

charlietfl
charlietfl

Reputation: 171700

You need to loop over each month, and within that loop you loop over "tour". You should also use "var" for your variables inside loops or you are going to run into problems Currently you are adding a 'ul' for every "TOUR" and you are also repeating ID's which is not allowed. Change your ID's to class as ID must be unique in page.

This should come a lot closer to what you are wanting:

// Start function when DOM has completely loaded
$(document).ready(function() {

    // Open the students.xml file
    $.get("xml/tourinfo.xml", {}, function(xml) {

        // Build an HTML string
        var myHTMLOutput = '';
        myHTMLOutput += '<div id="tours-container">';
        myHTMLOutput += '<img src="img/sep.png" style="vertical-align: middle;"></img>';

        $('MONTH', xml).each(function(mIdx) {
            myHTMLOutput += '<ul class="tour-info-container">';
            // Run the function for each student tag in the XML file
            $('TOUR', xml).each(function(i) {
                //tourMonth = $(this).find("TOUR MONTH").text();
                var tourNumber = $(this).find("NUMBER").text();
                var tourVenue = $(this).find("VENUE").text();
                var tourOther = $(this).find("OTHER").text();

                // Build row HTML data and store in string
                var mydata = BuildStudentHTML(tourNumber, tourVenue, tourOther);
                myHTMLOutput += myHTMLOutput + mydata;
            });
            myHTMLOutput += '</ul>';
        });
        myHTMLOutput += '</div>';
        $("#tourData").append(myHTMLOutput);
    });
});


function BuildStudentHTML(tourNumber, tourVenue, tourOther) {

    // Build HTML string and return
    output = '';
    output += '<li class="tourNumber">' + tourNumber + '</li>';
    output += '<img src="img/sep.png" style="vertical-align: middle;"></img>';
    output += '<li class="tourVenue">' + tourVenue + '</li>';
    output += '<img src="img/sep.png" style="vertical-align: middle;"></img>';
    output += '<li class="tourOther">' + tourOther + '</li>';
    return output;
}

Upvotes: 2

Related Questions