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
Advertisements