display xml data using javascript

Question

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

I think your BuildStudentHTML() function is getting called twice in a row so both <ul></ul>'s are merging. Try putting this at the end of your function and see what happens: output += '<hr />';. This basically adds an <hr /> at the end of each <ul></ul>. This may or may not solve your problem. Let me know how it goes. — rcplusplus
– rcplusplus, Commented Feb 26, 2012 at 22:39
Check this link out, it uses plain ol' javascript. First it gets the XML data with AJAX, parses it, then prints it as HTML. Here's the link: XML to HTML. NOTE: they use a <table></table> rather than a <ul></ul>, but I think you can have it suit your needs with just a few modifications. — rcplusplus
– rcplusplus, Commented Feb 26, 2012 at 22:54

charlietfl · Accepted Answer · 2012-02-27 02:40:13Z

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

Collectives™ on Stack Overflow

display xml data using javascript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related