如何在 JavaScript 和 NOT XSLT 中使用 DOM 对 xml 数据进行排序？

Question

how can XML be sorted by using the DOM? I know there's a sort function in XSL, however, I can't see the XSL styles anymore because I now have JavaScript used to manipulate the XML. Once I open the HTML page in live-server it only shows output controlled by the JS.

Here's a sample of the XML: How would I sort by deaths in JavaScript?

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="countries.xsl"?>
<countries>
<country region="north-america">
    <name>USA</name>
    <totalcases>88,822,018</totalcases>
    <activecases>3,247,166</activecases>
    <seriouscases>3,117</seriouscases>
    <totalrecoverd>84,534,008</totalrecoverd>
    <deaths>1,040,844</deaths>
    <casespermill>265,263</casespermill>
</country>
<country region="south-asia">
    <name>India</name>
    <totalcases>43,420,608</totalcases>
    <activecases>98,469</activecases>
    <seriouscases>698</seriouscases>
    <totalrecoverd>42,797,092</totalrecoverd>
    <deaths>525,047</deaths>
    <casespermill>30,863</casespermill>
</country>
<country region="south-america">
    <name>Brazil</name>
    <totalcases>32,136,916</totalcases>
    <activecases>779,729</activecases>
    <seriouscases>8,318</seriouscases>
    <totalrecoverd>30,686,581</totalrecoverd>
    <deaths>670,606</deaths>
    <casespermill>149,089</casespermill>
</country>

The following function is the HTTP request to the XML data

function loadCountries() {
let xhr = new XMLHttpRequest();
xhr.open("GET", "../countries.xml", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && this.status == 200) {
        generateCountries(this)
    }
};
xhr.send();
}

And finally here's the function that will load all the countries in a table

function generateCountries(xml) {
const myTable = document.createElement("table");
document.body.appendChild(myTable);
myTable.setAttribute("id", "myTable")
document.getElementById("root").style.display = 'none';
document.getElementById("myTable").style.display = 'block';
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("country")

var country = x[i];

// function getDeaths(a, b) {
//     return parseInt(a.getElementsByTagName("deaths")[0].firstChild.nodeValue, 10) - parseInt(b.getElementsByTagName("deaths")[0].firstChild.nodeValue, 10);
//     // return x.getElementsByTagName("deaths")[0].childNodes[0].nodeValue;
// }
//var sortedCountries = Array.prototype.slice.call(x); // convert XML object to array
//console.log(sortedCountries)
//let sort = sortedCountries.sort(getDeaths)
//console.log(sort)
for (var i = 0; i < sortedCountries.length; i++) {
    table += "<tr><td>" +
        x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
        "</td></tr>";
}
var table = "<tr><th>Country</th><th>Total Cases</th><th>Active Cases</th>" +
    "<th>Serious Cases</th><th>Recovered</th><th>Deaths</th><th>Cases per Million</th></tr>";
for (i = 0; i < x.length; i++) {
    table += "<tr><td>" +
        x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
        "</td><td>" +
        x[i].getElementsByTagName("totalcases")[0].childNodes[0].nodeValue +
        "</td><td>" +
        x[i].getElementsByTagName("activecases")[0].childNodes[0].nodeValue +
        "</td><td>" +
        x[i].getElementsByTagName("seriouscases")[0].childNodes[0].nodeValue +
        "</td><td>" +
        x[i].getElementsByTagName("totalrecoverd")[0].childNodes[0].nodeValue +
        "</td><td>" +
        x[i].getElementsByTagName("deaths")[0].childNodes[0].nodeValue +
        "</td><td>" +
        x[i].getElementsByTagName("casespermill")[0].childNodes[0].nodeValue;
}
document.getElementById("myTable").innerHTML = table;
}

The deaths should be sorted by highest number of deaths in descending order.

Answer 1

Just place into a normal Javascript array, and sort as normal.

The deaths in your XML have commas, so you will also want to strip them out, and then convert to an integer (parseInt). And then do the usual a - b for ascending, and b - a for descending.

eg..

 const data = new DOMParser().parseFromString(`<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="countries.xsl"?> <countries> <country region="north-america"> <name>USA</name> <totalcases>88,822,018</totalcases> <activecases>3,247,166</activecases> <seriouscases>3,117</seriouscases> <totalrecoverd>84,534,008</totalrecoverd> <deaths>1,040,844</deaths> <casespermill>265,263</casespermill> </country> <country region="south-asia"> <name>India</name> <totalcases>43,420,608</totalcases> <activecases>98,469</activecases> <seriouscases>698</seriouscases> <totalrecoverd>42,797,092</totalrecoverd> <deaths>525,047</deaths> <casespermill>30,863</casespermill> </country> <country region="south-america"> <name>Brazil</name> <totalcases>32,136,916</totalcases> <activecases>779,729</activecases> <seriouscases>8,318</seriouscases> <totalrecoverd>30,686,581</totalrecoverd> <deaths>670,606</deaths> <casespermill>149,089</casespermill> </country></countries>`,'text/xml') const countries = data.querySelector('countries').querySelectorAll('country'); function getDeaths(c) { return parseInt( c.querySelector('deaths').textContent.replaceAll(',', ''), 10); } const sorted = [...countries].sort((a, b) => { return getDeaths(b) - getDeaths(a); }); for (const country of sorted) { console.log( country.querySelector('name').textContent, country.querySelector('deaths').textContent ); }