Sorting Arrays of Custom Objects


Say that you want to sort the array of custom friend objects that we've created by the rank you've assigned to each object. You can do that easily enough in JavaScript using a sorting function (see "Sorting Arrays" in Chapter 19, "The Math , Number , Boolean , and Array Objects"). In this case, I'll add a button with the caption "Sort by Rank" that calls this function, which sorts the array of objects, array1 , with a sorting function named sorter , and displays the sorted array of objects in the text area:

 function sort()  {      array1.sort(sorter)      document.form1.textarea1.value = ""      for(var loopIndex = 0; loopIndex < array1.length; loopIndex++){          document.form1.textarea1.value += "Name: " + array1[loopIndex].name + " "          document.form1.textarea1.value += "Phone: " + array1[loopIndex].phone + " "          document.form1.textarea1.value += "Rank: " + array1[loopIndex].rank + "\n"      }  } 

Here's the sorting function, sorter (see the topic "Sorting Arrays" in Chapter 19 for the details on string functions) that lets JavaScript sort our objects based on the rank property:

 function sorter(a, b)  {      if(a.rank < b.rank) return -1      if(a.rank > b.rank) return 1      return 0  } 

Here's the new code:

(Listing 23-09.html on the web site)
 <HTML>      <HEAD>          <TITLE>              Creating Custom Objects          </TITLE>      </HEAD>      <BODY>          <H1>Creating Custom Objects</H1>          <FORM NAME="form1">              <TEXTAREA NAME="textarea1" ROWS="5" COLS="40"></TEXTAREA>              <BR>              Friend Rank: <INPUT TYPE="TEXT" NAME="text1">              <INPUT TYPE="BUTTON" ONCLICK="getName()" VALUE="Get Name">              <BR>  <INPUT TYPE="BUTTON" ONCLICK="sort()" VALUE="Sort by Rank">  </FORM>          <SCRIPT LANGUAGE="JavaScript">              <!--             function friend(name, phone, rank)              {                  this.name = name                  this.phone = phone                  this.rank = rank                  this.display = display              }              function display()              {                  window.alert("Name: " + this.name)              }              var array1 = new Array(4)              array1[0] = new friend("Ed", "555-1111", 4)              array1[1] = new friend("Harold", "555-2222", 1)              array1[2] = new friend("Nancy", "555-3333", 3)              array1[3] = new friend("Sandy", "555-4444", 2)              for(var loopIndex = 0; loopIndex < array1.length; loopIndex++){                  document.form1.textarea1.value += "Name: " + array1[loopIndex].name + " "                  document.form1.textarea1.value += "Phone: " + array1[loopIndex].phone + " graphics/ccc.gif "                  document.form1.textarea1.value += "Rank: " + array1[loopIndex].rank + "\ graphics/ccc.gif n"              }              function getName()              {                  for(var loopIndex = 0; loopIndex < array1.length; loopIndex++){                      if(array1[loopIndex].rank == document.form1.text1.value) {                           array1[loopIndex].display()                      }                  }              }  function sort()   {   array1.sort(sorter)   document.form1.textarea1.value = ""   for(var loopIndex = 0; loopIndex < array1.length; loopIndex++){   document.form1.textarea1.value += "Name: " + array1[loopIndex].name + graphics/ccc.gif " "   document.form1.textarea1.value += "Phone: " + array1[loopIndex].phone graphics/ccc.gif + " "   document.form1.textarea1.value += "Rank: " + array1[loopIndex].rank + graphics/ccc.gif "\n"   }   }   function sorter(a, b)   {   if(a.rank < b.rank) return -1   if(a.rank > b.rank) return 1   return 0   }  // -->          </SCRIPT>      </BODY>  </HTML> 

You can see the results in Figure 23.10, where you can click the "Sort by Rank" button to sort and display the friends by rank.

Figure 23.10. Sorting an array of custom objects.

graphics/23fig10.gif



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net