Sort Your Data Using Javascript

Javascript has basic sorting built into the language, but it also has the flexibility to do any kind of sorting you want. Read on and find out more about how you can customize your sorting tasks with Javascript.

Basic sorting

The Javascript array sort method performs an alphabetic sort of an array. Here are some examples:

[cc lang=”javascript”]
var wordList = new Array( “red”, “green”, “blue”);
wordList.sort();
[/cc]

Printing wordList gives the list {“blue, “green”, “red”} (see Example 1 web page).

[cc lang=”javascript”]
var wordList2 = new Array(“tiger”, “cat”, “dog”);
wordList2.sort();
[/cc]

Printing wordList2 gives the list “cat”, “dog”, “tiger” (see Example 2 web page).

Sorting using comparison functions

To perform sorting of an array using some other method besides alphabetical sorting, a comparison function must be passed to the sort method. This function can be included in the sort method as an unnamed function, or it can be a separate named function which can be called by the sort method. Here is an example of a template for a separate function:

[cc lang=”javascript”]
function numberTest (a, b) {

}
var numberList = {5, 4444, 333, 22222, 11};

numberList.sort(numberTest);
[/cc]

The sort method calls the function numberTest, working through all of the elements in the array. The arguments a and b in the function represent two elements in the array. The body of the function should return one of three values:

1. a goes before b = return a negative number
2. a goes after b = return a positive number
3. a is the same as b = return a zero

A simple comparison function for a numeric sort would be:

[cc lang=”javascript”]
function numberTest (a, b) {
return a – b;
}
[/cc]

This function will perform a numeric sort in increasing order. Printing the numberList array after sorting will display the following:

5 11 333 4444 22222 (see Example 3 web page).

To perform a numeric sort in decreasing order, the line within the function should be changed to the following:

[cc lang=”javascript”]
return b – a;
[/cc]

Printing the numberList array after sorting will display the following:

22222 4444 3333 11 5 (see Example 4 web page).

To perform a reverse alphabetic sort, the comparison function must explicitly return a -1, 0, or 1 depending on the alphabetic order. Returning the value of the direct comparison as for numeric sorting will not work. An example comparison function is shown below:

[cc lang=”javascript”]
function reverseAlphabeticTest(a, b) {
if (a < b) return 1; if (a > b) return -1;
return 0;
}
[/cc]

(see Example 5 web page).

Sorting lists of objects

Next, let us examine sorting an array of objects, where each object has two fields. A set of objects could be as follows:

[cc lang=”javascript”]
var testObject1 = {item: 5, note: “aaa”};
var testObject2 = {item: 4, note: “bbb”};
var testObject3 = {item: 3, note: “ccc”};
var testObject4 = {item: 2, note: “ddd”};
var testObject5 = {item: 1, note: “eee”};
[/cc]

These object can then be added to an array as follows:

[cc lang=”javascript”]
var testArray = new Array(); // Create a test array

// Add objects to testArray
testArray[testArray.length] = testObject1;
testArray[testArray.length] = testObject2;
testArray[testArray.length] = testObject3;
testArray[testArray.length] = testObject4;
testArray[testArray.length] = testObject5;
[/cc]

where the length property of the array is used as the index (it increases as more objects are added to the array).

The numeric sort comparison function used for examples 3 and 4 can be reused for sorting on any field in the object, but the field must be specified using a dot structure as shown below:

[cc lang=”javascript”]
function compareItems (a, b) {
return a.item – b.item;
}
testArray.sort(compareItems);
[/cc]

Printing the list of items and notes in the array after sorting gives the following:

Items: 1 2 3 4 5
Notes: eee ddd ccc bbb aaa
(see Example 6 web page).

As shown before, the order can be reversed by reversing the order of the elements in the comparison function.

Finally, let us look at how a comparison function can be more complex. This example will assume that Javascript is being used to read RSS feeds using the XMLHttpRequest function, and that the news items in the RSS feed need to be sorted by the pubDate element for use in a “River of News” RSS reader application. The application has already extracted the news items from RSS feeds as individual objects in an array with the following fields for each RSS item: title, link, description, pubDate, and guid. An example object could be as follows:

[cc lang=”javascript”]
var testObject1 = {title: “Star City”,
link: “http://liftoff.msfc.nasa.gov/news/2003/news-starcity.asp”,
description: “How do Americans get ready to work with Russians aboard the space station?”,
pubDate: “Tue, 03 Jun 2003 09:39:21 GMT”,
guid: “http://liftoff.msfc.nasa.gov/2003/06/03.html#item573”};
[/cc]

To perform a sort on pubDate, the text string describing the publication date of the item needs to be converted to a number for comparison. We can use the parse method included with the Javascript Date object to create the following comparison function:

[cc lang=”javascript”]
function comparepubDates(a, b) {
var pubDateValue1 = Date.parse(a.pubDate); // Get milliseconds for date/time string
var pubDateValue2 = Date.parse(b.pubDate); // Get milliseconds for date/time string
return pubDateValue1 – pubDateValue2;
}
[/cc]

This function will parse the pubDate field and convert the date string to a value in milliseconds, then use that value for the comparison to sort the objects.

(see Example 7 web page).

Summary

Javascript can sort arrays of data and arrays of objects in flexible ways. Use these examples to start sorting your data today!

References

RSS specification – hosted at Harvard University

Stack Overflow – discussion on sorting of Javascript objects