Art Catalog: Sorting

In previous mini-labs we have been developing an Art Catalog web page. A useful feature is the ability to sort the artworks alphabetically by artist name. In today's lab, we will develop a sorting function and then integrate it into the art catalog project.

Sorting Numbers and Strings

Start by implementing a simple selection sort that works on numbers and strings, similar to the one we discussed in class, taking advantage of the swap and findMinIndex functions from the previous mini-lab. If you developed those functions in another web page, copy them into the HEAD of your Art Catalog web page.

Exercise 1 - Selection Sort

1. Complete the following selection sort function, using the swap and findMinIndex functions. You should not copy code from the body of those functions into this function; instead, this function should include calls to swap and findMinIndex.

   
   //-------------
   // selectionSort - sort an array of items
   function selectionSort(theArray) 
   {
       // ADD ACTUAL CODE AFTER THE FOLLOWING PSEUDO-CODE:
       // For each item in the array,
       //    find the smallest item in the array starting at that index and
       //    swap the current item with that smallest item. 
       // ==> CODE THAT IMPLEMENTS THE COMMENTS ABOVE GOES HERE
   }
   
   

2. Test your function. Since the comparison operators "<" and ">" work for both strings and numbers, your sort function should work for arrays containing either. For example:

   
   var numbers = [0, -3, 22, 8];
   selectionSort(numbers);
   alert(numbers);    // Expected results: "-3,0,8,22"
   
   var strings = ["Tom", "Dick", "Harry", "Angelina"];
   selectionSort(strings);
   alert(strings);    // Expected results: "Angelina,Dick,Harry,Tom"
   
   

Sorting Art Catalog Entries

As it stands, the sort function you developed above will not work on an array of art catalog entries. This is because the comparison operators "<" and ">" are not able to correctly compare two art catalog objects. What would it mean for one art catalog object to be "less than" another? Alphabetical order of the artist names? Numerical order of the dates? JavaScript has no way of knowing which we want. Fortunately, this is easily addressed.

Exercise 2 - Sorting Art Catalog Entries

1. Rename the function findMinIndex to findMinimumName and selectionSort to sortByName. Modify the sortByName function so that it calls findMinimumName. Modify findMinimumName so that wherever it was directly copying or comparing array entries, it will now assign or compare the artist attributes of those entries. In other words, all references to array[i] become array[i].artist.



2. Add a Sort button on your page where you want it to appear. (But not within the script section of your page; the code to create a button is HTML code.) This button should have the attribute

   onclick="sortByName(myArray); buildTable(myTable, myArray)"
   

   as well as appropriate name, id and value attributes. (myTable should be the id of your table object (without quotation marks), and myArray should be the name of the variable holding your array of catalog entries.)

3. Test your sort button. If everything is working as it should, clicking the button should cause the table of art catalog entries to be sorted alphabetically by artist name.

   You may look at the page on grading criteria for Mini-Labs 7 - 9 and Lab 4 to see the breakdown of points given for this lab and the previous mini-labs.

If you have time...

If you have time, you can get a head-start on one of the tasks in Programming Project #3: sorting by date. Define a function similar to sortByName that sorts catalog entries by date rather than by artist name, and create a second sorting button so that a user has the option to sort the catalog by artist name or by date.