Art Catalog: Sorting

In previous activities we have been developing an Art Catalog web page. A useful feature is the ability to sort the artworks alphabetically by artist name. In this activy, you will integrate a sorting function into the art catalog project.

Importing Sorting Functions

A good starting point would be the sorting functions you have already implemented and tested.

Exercise 1 - Import Sorting Functions

• Import the selectionSort, findMinIndex, and swap functions from the sandbox page you used for the Swap and Find Min and Selection Sort activities into your Art Catalog project.

  Just copy the selectionSort, findMinIndex, and swap functions into your Art Catalog project. Do not copy the generatePage function, nor anything from the body of your sandbox page.

Sorting Art Catalog Entries

As it stands, the sort function you just imported will not work on an array of art catalog entries. This is because we can't use the comparison operators "<" and ">" to directly compare two full 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 - Sort Art Catalog Entries by Artist Name

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 referring to whole array entries, it will now refer to the artist attributes of those entries. In other words, all references to array[i] become array[i].artist (if those are the names you gave the array, the index, and the artist name attribute).



2. Add a Sort button on your page where you want it to appear. (But not within a 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. (Use the id of your table object (without quotation marks) instead of myTable, and the name of the variable holding your array of catalog entries instead of myArray.)

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 all Art Catalog In-Class Activities to see the criteria used to grade the Art Catalog activities.

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.