Question

我有这个示例XML数据

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
    <CD>
        <TITLE>Greatest Hits</TITLE>
        <ARTIST>Dolly Parton</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>RCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1982</YEAR>
    </CD>
</CATALOG>

我希望在此ajax调用之后按年份按升序排序

function handleResponse () {
    "use strict";
    var ajax = new XMLHttpRequest();;

    if ( ajax ) {
        ajax.onreadystatechange = function () {

            if ( ajax.readyState == 4 ) {

                if ( ajax.status == 200 || ajax.status == 304 ) {

                    // console.log( ajax.responseXML );

                    var returnedData = handleXML( ajax.responseXML );

                    var collection = document.getElementById( "collection" );

                    collection.innerHTML = returnedData;

                }

            }

        };

        ajax.open("GET", "catalog.xml", true);
        ajax.send(null);
    }

}

function handleXML ( response ) {
    "use strict";

    var data = response;

    var cd = data.getElementsByTagName("CD");

    var table = "<table>";

        table += "<thead>";
        table += "<tr>";
        table += "<th>Title</th>";
        table += "<th>Artist</th>";
        table += "<th>Country</th>";
        table += "<th>Year</th>";
        table += "<th>Price</th>";
        table += "</tr>";
        table += "</thead>";
        table += "<tbody>";

        for ( var i = 0, len = cd.length; i < len; i++ ) {

            table += "<tr>";
            table += "<td>"+ cd[i].getElementsByTagName("TITLE")[0].firstChild.nodeValue +"</td>";
            table += "<td>"+ cd[i].getElementsByTagName("ARTIST")[0].firstChild.nodeValue +"</td>";
            table += "<td>"+ cd[i].getElementsByTagName("COUNTRY")[0].firstChild.nodeValue +"</td>";
            table += "<td>"+ cd[i].getElementsByTagName("YEAR")[0].firstChild.nodeValue +"</td>";
            table += "<td>$"+ cd[i].getElementsByTagName("PRICE")[0].firstChild.nodeValue +"</td>";
            table += "</tr>";

        }

        table += "</tbody>";
        table += "</table>";

    return table;
}

window.onload = function() {  
    "use strict";
    var button = document.getElementById("button");
    button.onclick = handleResponse;
};

因此，当数据出现在浏览器中时，它从显示1982年第一次，1985年第二次，最后一次持续到1988年的记录的数据行开始。

如何解决这个问题？

Answer 1

您可以将cd转换为数组并使用数组排序函数对其进行排序。因此，您的handleXML函数将为：

function handleXML ( response ) {
    "use strict";

    var data = response;

    var cd = data.getElementsByTagName("CD");

    var table = "<table>";

        table += "<thead>";
        table += "<tr>";
        table += "<th>Title</th>";
        table += "<th>Artist</th>";
        table += "<th>Country</th>";
        table += "<th>Year</th>";
        table += "<th>Price</th>";
        table += "</tr>";
        table += "</thead>";
        table += "<tbody>";
        function s(a,b){
        return parseInt(a.getElementsByTagName("YEAR")[0].firstChild.nodeValue,10) - parseInt(b.getElementsByTagName("YEAR")[0].firstChild.nodeValue,10);
        }
        var sortedCD = Array.prototype.slice.call(cd);// convert XML object to array
        sortedCD=sortedCD.sort(s);//sort it using element's year
        for ( var i = 0, len = sortedCD.length; i < len; i++ ) {

            table += "<tr>";
            table += "<td>"+ sortedCD[i].getElementsByTagName("TITLE")[0].firstChild.nodeValue +"</td>";
            table += "<td>"+ sortedCD[i].getElementsByTagName("ARTIST")[0].firstChild.nodeValue +"</td>";
            table += "<td>"+ sortedCD[i].getElementsByTagName("COUNTRY")[0].firstChild.nodeValue +"</td>";
            table += "<td>"+ sortedCD[i].getElementsByTagName("YEAR")[0].firstChild.nodeValue +"</td>";
            table += "<td>$"+ sortedCD[i].getElementsByTagName("PRICE")[0].firstChild.nodeValue +"</td>";
            table += "</tr>";

        }

        table += "</tbody>";
        table += "</table>";

    return table;
}

在ajax之后对从XML文件返回的数据进行排序

1 个答案: