Projects — Arrayzing

Arrayzing (a contraction of “array” and “amazing”) is a JavaScript array manipulation library with a syntax similar to jQuery.

Arrayzing is currently hosted at Google Code and under heavy development. A beta version should be available by the end of March 2009.

Introduction

Since Arrayzing is inspired by jQuery, it shares a similar syntax. For instance, to make a new Arrayzing object, you would type the following:

// Create an Arrayzing instance.
var ex1 = _([0, 1, "two", ["three", "4"]]);
 
// Equivalent to the above.
var ex2 = Arrayzing([0, 1, "two", ["three", "4"]]);

Or you can omit the square braces altogether:

var ex3 = _(0, 1, "two", ["three", "4"]);

But we’re getting off track here. What’s the point of Arrayzing? Why would I want to use it? Essentially, Arrayzing brings to JavaScript a convenient way to manipulate arrays. This is accomplished by using bulk methods and chaining.

For example, consider a table with headers that are pulled down from an Oracle database and are used (by say PHP or ASP) to generate an array in JavaScript.

headers = ["Client Name", "JANUARY", "FEBRUARY", "MARCH"];

Now, imagine your client tells you that he doesn’t want any of the headers to be all uppercase letters because he thinks it looks unprofessional. So you say fine, I’ll write some JavaScript to handle that.

// A regular expression that matches a string that 
// is all uppercase.
var pattern = /^[A-Z]+$/;
 
// Iterate through the header values.
for (var i = 0; i < headers.length; i++)
{
  var header = headers[i];
  if (pattern.test(headers[i]))
  {
    header =
      header.substring(0, 1).toUpperCase() +
      header.substring(1).toLowerCase();
  }
}

And that works. But it’s an awful lot of code to achieve something relatively simple. Let’s see how we’d do it in Arrayzing.

headers = _(headers).areUpper().capitalize().merge();

As simple as that. Because of chain and bulk methods, Arrayzing let’s you pack a lot of functionality into a couple lines of code.

How about another example? Let’s say you have an array, and you want to filter all the non-numbers from it? Or maybe just get the index of all the numbers in it? Or maybe just the index of the second occurrence of a number? Here’s how you’d do that:

var array = [1, 2, "foo", "bar", 23, 3.33];
 
// Get all the numbers.
var numbers = _(array).numbers();
 
// Get the indices of all the numbers in the array.
var indices = _(array).indicesOf(/\d+/);
alert(indices.str()); // shows "0, 1, 4, 5"
 
// ... or just the second number in the array.
alert(indices[1]); // shows "1"

But what if you want something more complicated than just the numbers? Maybe you want to filter out all the values that are formatted as money? And then maybe add them up?

// An array of various elements, some of them money.
var array = ["$40.25", 5.99, "20.00", "foo", false, "$2.50"];
 
var total = _(array)
  .filter(/^\$\d+\.\d{2}$/) // Filter out money strings.
  .prechop() // Chop off the first letter of each element.
  .sum();    // Convert all the elements to numbers
             // and then add them together.
 
// Prepends "$" to the total and then show the total.
alert(_(total).prefix("$").str()); // Shows  "$42.75".

2 Comments so far

  1. [...] The above code would return result = ["hello", "heLlo", "hellO"]; That is a lot of code to filter out an array. This spawned the creative process and got Cam working on a little public API in which I am assisting with called Arrayzing. [...]

  2. [...] Arrayzing [...]