With the advent of AJAX and JSON, we rarely need to keep large amounts of data on the client-side, but there are still occasions when a small amount of dynamic changes are extremely helpful, are not too taxing on client resources, and help improve performance.

I recently discovered that using client-side Array Objects rather than just your typically multi-dimensional arrays in Javascript really brings your client-side code out of the dark ages!

Creating a Client-Side Multi-Dimensional Array (old school)

function PopulateEmployeeArray() {

// initialize variables

   var arEmployees = new Array();

   var $tds = $(“#EmployeesTable”).find(“#EmployeeID”);

   var counter = 0;

   // iterate items

   $tds.each(function () {

      // retrieve values from employee table indexed field values

      var itemIndex = this.getAttribute(“EmployeeIndex”);

      var employeeID = $(“#EmployeeID_” + itemIndex).val();

      var fullName = $(“#EmployeeName_” + itemIndex).val();

      var jobTitle = $(“#EmployeeTitle_” + itemIndex).val();

      var department = $(“#EmployeeDepartment_” + itemIndex).val();

      // populate array

      arEmployees[counter] = new Array(5);

      arEmployees [counter][0] = itemIndex;

      arEmployees[counter][1] = employeeID;

      arEmployees[counter][2] = fullName;

      arEmployees[counter][3] = jobTitle;

      arEmployees[counter][4] = department;

      // increment counter

      _count++;

   });

   // return array

   return arEmployees;

}

Creating a Client-Side Multi-Dimensional Array Object (better)

function PopulateEmployeeArray() {

// initialize variables

   var arEmployees = new Array();

   var $tds = $(“#EmployeesTable”).find(“#EmployeeID”);

   // iterate items

   $tds.each(function () {

      // retrieve values from employee table indexed field values

      var itemIndex = this.getAttribute(“EmployeeIndex”);

      var employeeId = $(“#EmployeeID_” + itemIndex).val();

      var fullName = $(“#EmployeeName_” + itemIndex).val();

      var jobTitle = $(“#EmployeeTitle_” + itemIndex).val();

      var department = $(“#EmployeeDepartment_” + itemIndex).val();

      // populate array

      arEmployees[arEmployees.length] = { idx: itemIndex, id: employeeId, name: fullName, title: jobTitle, dept: department };

   });

   // return array

   return arEmployees;

}

Definitely better looking, but look how much nicer it is to access a value. No more remembering index numbers or fear of adding new items. And much more readable!

Retrieving Client-Side Multi-Dimensional Array Value (old school)

var employeeName = arEmployees[0][2];

Retrieving Client-Side Multi-Dimensional Array Object Value (better)

var employeeName = arEmployees[0][‘name’];

Finally, thanks to jQuery, searching multidimensional array has never been easier. Check out the new jQuery grep function.

Searching Client-Side Multi-Dimensional Array Value (old school)

function FindEmployee(employeeName) {

// initialize variables

   var arEmployees = PopulateEmployeeArray();

   // iterate items

   for(var i = 0; i< arEmployees.length; i++) {

      if (arEmployees[i][2] == employeeName)

      {

         return arEmployees[i];

      }

   }

}

Retrieving Client-Side Multi-Dimensional Array Object Value (better)

function FindEmployee(employeeName) {

// initialize variables

   var arEmployees = PopulateEmployeeArray();

   return jQuery.grep(arEmployees, function (a) { return a[‘name’] == employeeName; });

}

With jQuery grep, you can return multiple records. For example, if you wanted to search for a subset of records based on department.

function FindDepartmentEmployees(department) {

   // initialize variables

   var arEmployees = PopulateEmployeeArray();

   return jQuery.grep(arEmployees, function (a) { return a[‘dept’] == department; });

}

You can also search on multiple attributes.

function FindEmployeeDepartmentRoles(department, jobTitle) {

   // initialize variables

   var arEmployees = PopulateEmployeeArray();

   return jQuery.grep(arEmployees, function (a) { return a[‘dept’] == department && a[‘title’] == jobTitle; });

}

I also use it to make sure there are no duplicate records.

function IsEmployeeDuplicate(employeeID) {

   // initialize variables

   var arEmployees = PopulateEmployeeArray();

   arEmployees = jQuery.grep(arEmployees, function (a) { return a[‘id’] == employeeID; });

   return (arEmployees.length > 1);

}

Powerful AND cool. J