Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sorting XML data

    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:
    Code:
    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:
    Code:
    <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...

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

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

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure I understand your data structure. Something like this?

    Code:
    var array1 = [ 
      [ "word1", "section1", "def1" ],
      [ "word2", "section2", "def2" ],
      [ "word3", "section3", "def3" ]
    ];
    If so maybe something like this

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

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?)

  • #6
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    New Coder
    Join Date
    Oct 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot! that did the trick exactly!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •