;)
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
