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 + " " document.form1.textarea1.value += "Rank: " + array1[loopIndex].rank + "\ 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 + " " document.form1.textarea1.value += "Phone: " + array1[loopIndex].phone + " " document.form1.textarea1.value += "Rank: " + array1[loopIndex].rank + "\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.
|