Here is a solution for sorting a collection of JavaScript objects. For the purposes of this example, I have a JavaScript object that represents a single table row of data. As these objects are created they are stuffed into an array. So in the end I have an array that contains an object for every row of my table.

Here is what the object looks like:

 
                function AbsenteeData(
                                      requestId,
                                      requestReason,
                                      startDate,
                                      endDate,
                                      totalDays,
                                      paidDays,
                                      requestStatus,
                                      submitDate,
                                      mgrComments,
                                      empComments
                                      )
                {
                    this.requestId = requestId;
                    this.requestReason = requestReason;
                    this.startDate = startDate;
                    this.endDate = endDate;
                    this.totalDays = totalDays;
                    this.paidDays = paidDays;
                    this.requestStatus = requestStatus;
                    this.submitDate = submitDate;
                    this.mgrComments = mgrComments;
                    this.empComments = empComments;
                    this.sortBy = null;
                    this.setSortBy = function(property)
                                    {
                                        if (this[property]) {
                                            if (property == "endDate" || property == "endDate" || property == "submitDate") {
                                                var dateObj = date_getDateObject(this[property]);
                                                this.sortBy = dateObj.valueOf();
                                            }
                                        }else{
                                            this.sortBy = this[property];
                                        }
                                        return;
                                    }
                    this.toString = function(){return this.sortBy;};
                }
                
                //create an array of AbsenteeData objects
                var arrayData = new Array();
                arrayData.push(new AbsenteeData(value1, value2,...));
                arrayData.push(new AbsenteeData(value1, value2,...));
                arrayData.push(new AbsenteeData(value1, value2,...));
                .
                .
                .
                

If you noticed, there is a sortBy property for each object. The value of this property is returned through the toString method of the object. Just like with any object in other languages the JavaScript object toString method can be overriden to return what ever string value is needed to represent the object. The toString method is called automatically whenever a procedure is run on the object that expects a String object returned.

This behavior applies to the array.sort() method as well. Because of this, the array of objects can now be sorted based on the value of the sortBy property.

Before actually running the sort method on the array, first you'll have to loop through the array and call the setSortBy method of each object indicating which property of the object you want to sort by.

Here is what the code would look like to sort this array of data.

 
                var sortProperty = "[any property of the object]";
                for (var x=0; x<arrayData.length;x++){
                    arrayData[x].setSortBy(sortProperty);
                }
                arrayData.sort();
                

And that's it. Your array of objects is now sorted according the the object values for the specified property. Of course there are some caveats when sorting arrays. For example case matters, so convert strings to lower case before sorting, and an extra step is needed when sorting by numeric values. See the JavaScript documentation on array sorting for more help.

NOTE: For date values, you'll see that we have to do a little extra work in order to sort by date. Basically, we have to take the date string and convert it into a Date object, and then call the getTime() method on the Date object to return the number of milliseconds that represents that Date.

Why is this cool?

Many times in applications we have tables of data that we need to be able to sort based on column values. In the past we've usually forced a round trip to the server in order to sort the data, and then re-build the html and send it back to the client.

Now, by sending the table data as JavaScript objects to the client, we can sort the data locally and use DHTML to dynamically re-build the table on the client. See the Sorting Objects - a concrete demo for an example that uses this technique.

Of course using objects to represent a row of data on the client also opens up a lot of other options for the developer, like real-time updating of the GUI while using IFrames to silently transfer data back and forth with the server, but that is for a different discussion.