sorting multidimensional arrays

**bcamp1973** · 07-28-2009 05:42 PM

say i have a simple array...

Code:

var myArray = [ ['Bob',32], ['Mary',28], ['Alice',33], ... ];

I want to be able to resort this array (ascending/descending) by both name (myArray[i][0]) and age (myArray[i][1]). What's the easiest approach without creating a new array? Or is there one? I know of the sort() method, but wasn't sure that that would work here?

**mrhoo** · 07-28-2009 06:21 PM

Code:

myArray.sort(function(a,b){
  if(a[0]==b[0]) return a[1]-b[1];
  if(a[0]>b[0]) return 1;
  return -1;
})

**A1ien51** · 07-28-2009 07:09 PM

I wrote up how to extend Array to do it here:

http://radio.javaranch.com/pascarell...615124260.html

It is the same idea as MrHoo has, but with a little more flexibility.

Eric

**bcamp1973** · 07-29-2009 12:36 PM

Thanks for responding guys. I'm trying to do a basic proof of concept and it's not working for me. I know i'm overlooking something simple, but i can't put my finger on it. Getting the generic error...

Code:

TypeError: Result of expression 'document.getElementById('message').innerHTML' [] is not a function.

Here's my markup...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Arrays</title>
	<script type="text/javascript">
		/* <![CDATA[ */
			Array.prototype.sortMulti = function(){
				var
					argsLen = arguments.length,
					args = arguments;
				function custSort(a,b){
					for(var i=0; i<argsLen; i++){
						var
							col = args[i],
							x = a[col],
							y = b[col];
						if(x===y)continue;
						return x > y;
					}
					return 0;
				}
				return this.sort(custSort);
			}

			var myArray = [
				['fred',23],
				['andy',34],
				['sandra',48],
				['sid',54],
				['ian',15]
			];

			function printIt(){
				document.getElementById('message').innerHTML(
					myArray.sortMulti(0)
				)
    	}
		/* ]]> */
	</script>
</head>

<body onload="printIt()">

	<div id="message"></div>
	
</body>

</html>

**A1ien51** · 07-29-2009 01:10 PM

innerHTML is not a method

Code:

document.getElementById('message').innerHTML = myArray.sortMulti(0);

Eric

**bcamp1973** · 07-29-2009 01:20 PM

Thanks Eric...i feel like a real idiot for not seeing that one. :P Now it's loading correctly, however the sortMulti() function doesn't seem to be having any affect on my array...

**A1ien51** · 07-29-2009 01:29 PM

Looks fine to me

Code:

			function printIt(){
                                
                                var sorted = myArray.sortMulti(0);

				var out = [];
                                for(var i=0;i<sorted.length;i++){
                                    out.push(sorted[i].join("--"));
                                }
				document.getElementById('message').innerHTML = out.join("<br/>");
    	                }

It does not change the original array.

Eric

**bcamp1973** · 07-29-2009 01:44 PM

Thanks for the updated code. It's working as you described it would in FireFox. For some reason it's not working in Safari. Is there a trick to make it more cross-browser?

**A1ien51** · 07-29-2009 01:52 PM

Some strange reason if I call it with a button click it works, but it is not working onload. Scratching my head on this one.

Eric

**bcamp1973** · 07-29-2009 01:57 PM

I made the following changes and it's working for me. However, I'm not really sure why?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Arrays</title>
	<script type="text/javascript">
		/* <![CDATA[ */
			Array.prototype.sortMulti = function(){
				var
					argsLen = arguments.length,
					args = arguments;
				function custSort(a,b){
					for(var i=0; i<argsLen; i++){
						var
							col = args[i],
							x = a[col],
							y = b[col];
/*
						if(x===y)continue;
						return x > y;
*/
						switch(true){
							case x < y : return -1; break;
							case x > y : return 1; break;
							default : return 0;
						}
					}
/* 					return 0; */
				}
				return this.sort(custSort);
			}

			var myArray = [
				['fred',23],
				['andy',34],
				['sandra',48],
				['sid',54],
				['ian',15]
			];

			function printIt(){
				var sorted = myArray.sortMulti(1);
				
				var out = [];
				for(var i=0;i<sorted.length;i++){
					out.push(sorted[i].join("--"));
				}
				document.getElementById('message').innerHTML = out.join("<br/>");
    	}
		/* ]]> */
	</script>
</head>

<body onload="printIt()">

	<div id="message"></div>
	
</body>

</html>

**A1ien51** · 07-29-2009 02:05 PM

Yeah, I will have to look at it more later, I see that it is working fine with onload if the column is one and not zero. major WTF moment here.

Eric

**bcamp1973** · 07-29-2009 02:19 PM

Thanks for all your help Eric (and mrhoo)! You saved me hours of beating my head on my desk

Thread: sorting multidimensional arrays

Thread Tools

Display

Hybrid View

sorting multidimensional arrays

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions