Transpose An Array In JavaScript and jQuery

February 24, 2010 · 2 comments   5,072 views

in Technical Publications

This JavaScript code adds the functionality to transpose a two-dimensional JavaScript array (array within array). Transposing, in simple terms, is to interchange rows and columns of a matrix (two-dimensional array).

It also extends jQuery to allow transposing of arrays using common jQuery syntax.

The logic behind the code is extremely simple and it is coded keeping performance in mind. The code adds the transpose method to the prototype of the Array object. This allows all arrays to have a transpose() function that can be independently executed.

Installation And Usage of transpose.js

You would require to download the files from this site and include them within the section of your page.

Once you have included the script, you can take any Array object and call the .transpose() method on it. This will return the transposed array.

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="transpose.js"></script>
  4. </head>
  5.  
  6. <body>
  7. <script type="text/javascript">
  8.   var matrix = [ [1, 2, 3], [4, 5, 6] ];
  9.   var transposed = matrix.transpose();
  10. </script>
  11. </body>
  12. </html>

In the above example, we have transposed a 3 x 2 matrix into a 2 x 3 matrix. If you have FireBug installed, you can see the formatted output by doing console.log() of the transposed variable.

Note: In case you do not have a square matrix, the transposition will still be done on square dimension based on the lengths of first row and first column.

Transpose Array In jQuery

The transpose.js file works seamlessly with jQuery as well. In case jQuery is included in the page (before tranpose.js) it then extends jQuery with the .transpose() method.

The .transpose() method takes in an array object as argument and returns the transposed array.

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="jquery.js"></script>
  4. <script type="text/javascript" src="transpose.js"></script>
  5. </head>
  6.  
  7. <body>
  8. <script type="text/javascript">
  9.   var matrix = [ [1, 2, 3], [4, 5, 6] ];
  10.   var transposed = $.transpose(matrix);
  11. </script>
  12. </body>
  13. </html>

Download transpose.js JavaScript Prototype and jQuery Plugin

The download package contains transpose.js (minified 322 bytes), transpose.debug.js (full documented version) and some sample HTML files to get you started.

Download transpose.js (version 1.0.0.0, 26.15 kB, 832 dowloads)

Source Code Snippet

  1. /**
  2.  * Transposes a given array.
  3.  * @id Array.prototype.transpose
  4.  * @author Shamasis Bhattacharya
  5.  *
  6.  * @type Array
  7.  * @return The Transposed Array
  8.  * @compat=ALL
  9.  */
  10. Array.prototype.transpose = function() {
  11.  
  12.   // Calculate the width and height of the Array
  13.   var a = this,
  14.     w = a.length ? a.length : 0,
  15.     h = a[0] instanceof Array ? a[0].length : 0;
  16.  
  17.   // In case it is a zero matrix, no transpose routine needed.
  18.   if(h === 0 || w === 0) { return []; }
  19.  
  20.   /**
  21.    * @var {Number} i Counter
  22.    * @var {Number} j Counter
  23.    * @var {Array} t Transposed data is stored in this array.
  24.    */
  25.   var i, j, t = [];
  26.  
  27.   // Loop through every item in the outer array (height)
  28.   for(i=0; i<h; i++) {
  29.  
  30.     // Insert a new row (array)
  31.     t[i] = [];
  32.  
  33.     // Loop through every item per item in outer array (width)
  34.     for(j=0; j<w; j++) {
  35.  
  36.       // Save transposed data.
  37.       t[i][j] = a[j][i];
  38.     }
  39.   }
  40.  
  41.   return t;
  42. };

 

Related posts:

  1. Convert FusionCharts Data-XML To JavaScript Array
  2. Load jQuery Plugins Only When Required (Runtime)
  3. JavaScript Optimization – Destructive Vs Indexed Array Iteration
  4. Infinite Ways to Detect Array in JavaScript
  5. Fast Algorithm To Find Unique Items in JavaScript Array

Tagged as: , , ,