使用javascript显示xml数据

display xml data using javascript

本文关键字：数据 xml 显示 javascript 使用更新时间：2023-09-26

我有一个简单的xml列表，我想用javascript解析它，但它并没有按照我想要的方式创建列表。

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

我想根据不同的月份将它们显示在两个单独的列表中，但使用下面的代码，它会创建一个旅游大列表，而不是两个基于月份的单独列表。

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

您需要每个月循环一次，在这个循环中您循环一次"tour"。您还应该对循环中的变量使用"var"，否则会遇到问题目前，您正在为每个"TOUR"添加一个"ul"，并且您还重复ID，这是不允许的。将ID更改为类，因为ID在页面中必须是唯一的。

这应该更接近你想要的：

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