BoxySystems Inc.

Array sorting (Array.sort()) in Javascript is a very useful function. I have used it lots of times. But, I never tried sorting objects stored in arrays. As you may or may not aware, Javascript objects in arrays are pretty flexible data structures. It can be used as Vector, Hashtables, Linked lists etc. In this article, I am going to discuss how to implement object based sorting in Javascript arrays. I am sure, you can do this in many different cool ways using frameworks like Prototype, JQuery etc. But, I would like to show, how we can implement this in native Javascript.

Alright, here is our Javascript object Character and they are stored in characterList array. We would like to sort the contents of the array on firstName, lastName & age in ascending and descending orders. The proof is in the code…

	function Character(firstName, lastName, age){
		this.firstName = firstName;
		this.lastName = lastName;
		this.age = age;
	}

  var characterList = new Array();
  characterList[0] = new Character('Jerry','Seinfeld',35);
  characterList[1] = new Character('George','Costanza',38);
  characterList[2] = new Character('Elaine','Benes',30);
  characterList[3] = new Character('Kramer','Cosmo',40);

Here is our test function – jsObjectSortingTest. Please feel free to refactor the sort handler, the way you wish. I have tested this in IE, Firefox & Opera. I am hoping, it should work fine in other javascript environments too.

  	function jsObjectSortingTest() {
		alert("Javascript object sorting test");	

		alert("Character list without sorting");
		displayCharacterList();

		characterList.sort(sortFirstNameAscendingHandler);
		alert("Character list after sorting on 'firstName' in 'ascending' order");
		displayCharacterList();

		characterList.sort(sortLastNameDescendingHandler);
		alert("Character list after sorting on 'lastName' in 'descending' order");
		displayCharacterList();

		characterList.sort(sortAgeAscendingHandler);
		alert("Character list after sorting on 'age' in 'ascending' order");
		displayCharacterList();
	}

  function sortFirstNameAscendingHandler(thisObject,thatObject) {
	if (thisObject.firstName > thatObject.firstName)
	{
		return 1;
	}
	else if (thisObject.firstName < thatObject.firstName)
	{
		return -1;
	}
	return 0;
  }

  function sortLastNameDescendingHandler(thisObject,thatObject) {
	if (thisObject.lastName > thatObject.lastName)
	{
		return -1;
	}
	else if (thisObject.lastName < thatObject.lastName)
	{
		return 1;
	}
	return 0;
  }

  function sortAgeAscendingHandler(thisObject,thatObject) {
	if (thisObject.age > thatObject.age)
	{
		return 1;
	}
	else if (thisObject.age < thatObject.age)
	{
		return -1;
	}
	return 0;
  }

  function displayCharacterList() {
	for(var i=0; i < characterList.length; i++) {
		alert("Name = "+characterList[i].firstName+", "+characterList[i].lastName+", Age = "+characterList[i].age);
	}
  }
  

Thoughts, comments, suggestions ?