Here is a snippet of XML data sample to work with:
<?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>
I need to arrange this data in ascending order based on the year, after an ajax call.
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;
};
To display data starting with the record from 1982 first, followed by 1985, and lastly 1988, how should I proceed?
Your insights on solving this issue are greatly appreciated!