Sorting XML data

mynameisdave145

12-06-2006, 09:36 PM

ok, Ive got a script I am using that reads data from an XML file, then outputs that information into a table when a link is clicked. It works great as it is right now, however I want to be able to sort the information in different ways and am not sure what the best way to do this would be...

Script that works to simply display information into a table:
function getData()
{
output = '<table width="450" border="1" cellspacing="1" cellpadding="1"><tr><td width="100"><b>Word</b></td><td width="50"><b>Section</b></td><td width="200"><b>Definition</b></td>';
var wrds = xmlDoc.getElementsByTagName("definition");
for (var i=0; i<wrds.length; i++)
{
var word = xmlDoc.getElementsByTagName("word")[i].childNodes[0].nodeValue;
var section = xmlDoc.getElementsByTagName("section")[i].childNodes[0].nodeValue;
var def = xmlDoc.getElementsByTagName("def")[i].childNodes[0].nodeValue;
output += '<tr><td>' + word + '</td><td>' + section + '</td><td>' + def + '</td></tr>';
}
document.getElementById('glossaryDiv').innerHTML = output;
}

XML file format:
<glossary>
<definition id="1">
<word>Music</word>
<section>Main</section>
<def>Music is great</def>
</definition>
<definition id="2">
<word>Abstract</word>
<section>Main</section>
<def>Of or pertaining to the formal aspect of art, emphasizing lines, colors, generalized or geometrical forms, etc., esp. with reference to their relationship to one another; pertaining to the nonrepresentational art styles of the 20th century.</def>
</definition>
...etc...
</glossary>

I just want to write a new function that will say sort this alphabetically, or by section or whatever else... any help would be greatly appreciated...

david_kw

12-06-2006, 10:15 PM

If you are just trying to sort the output and not the XML you just put your info in an array then sort it using sort(). If it is too big or you need to sort the whole XML tree then XSL is probably the way to go. Here is an example of sorting the array once it is created.

<html>
<head>
<title>Sort Test</title>
<script type="text/javascript">
var a = null;

function showIt() {
var adiv = document.getElementById("adiv");
var s = "";

for (var i = 0; i < a.length; i++) {
var a2 = [ a[i].word, a[i].section, a[i].def ];
s += a2.join(" - ") + "<br />";
}

adiv.innerHTML = s;
}

function sortAlphaByWord(a, b) {
if (a.word == b.word) { return(0) }
else if (a.word < b.word) { return(-1) }
else if (a.word > b.word) { return(1) }
}

function sortAlphaBySection(a, b) {
if (a.section == b.section) { return(0) }
else if (a.section < b.section) { return(-1) }
else if (a.section > b.section) { return(1) }
}

function sortIt(f) {
a.sort(f);
showIt();
}

window.onload = function () {
var e;

a = [];

e = { };
e.word = "peanut"
e.section = "food";
e.def = "nut you can eat if not allergic";
a.push(e);

e = { };
e.word = "zebra"
e.section = "animal";
e.def = "striped furry thing";
a.push(e);

e = { };
e.word = "tree"
e.section = "plant";
e.def = "woody, greenish thing";
a.push(e);
}
</script>
</head>
<body>
<button onclick="showIt();">Show List</button>
<button onclick="sortIt(sortAlphaByWord);">Sort List by Word</button>
<button onclick="sortIt(sortAlphaBySection);">Sort List by Section</button>
<div id="adiv"> </div>
</body>
</html>

david_kw

mynameisdave145

12-08-2006, 09:02 PM

OK, i got it doing what I want. Now i have a new problem to solve. I have it setup so my data from the xml file gets inserted into 2 arrays. 1 array as an "index" for the words, then within that, each element is its own array with the word, section, and definition.

The first item of the array in each is the word name, allowing for easy alphabetically, however I am trying to sort by section and am not sure what the best way to do this would be. any ideas?

david_kw

12-08-2006, 09:25 PM

I'm not sure I understand your data structure. Something like this?

var array1 = [
[ "word1", "section1", "def1" ],
[ "word2", "section2", "def2" ],
[ "word3", "section3", "def3" ]
];

If so maybe something like this

function sortAlphaBySection(a, b) {
if (a[1] == b[1]) { return(0) }
else if (a[1]< b[1]) { return(-1) }
else if (a[1] > b[1]) { return(1) }
}

david_kw

mynameisdave145

12-08-2006, 09:43 PM

thank you that makes a lot of sense after being layed out better... what function would i use to change the place of items within the array though?
(What would the 0, 1, or -1 be sent into to make this shift?)

david_kw

12-08-2006, 09:53 PM

Ahh, I see your question. The key is this line.

array1.sort(sortAlphaBySection);

This is a built in javascript function. It takes the "testing" function as a parameter. This function actually does the moving around. The sort() function calls your testing function to see how to compare two elements of the array so that the sort() function can move them around. For more information on sort() you can look here

http://www.w3schools.com/jsref/jsref_sort.asp

david_kw

mynameisdave145

12-09-2006, 08:44 AM

Thanks a lot! that did the trick exactly!