JQuery $.each

The JQuery $.each object accessor is probably the best method since the invention of the wheel (or at least, since Stargate SG1 was first conceived). It completely replaces the ‘for’ loop to iterate over an object. The power of this method is that it can iterate over any collection (Dom collections, associative arrays, JSON objects, etc). In general, using JQuery can make Javascript development so much easier.

When I use Javascript to iterate over DOM elements, I usually do something like this:

?View Code JAVASCRIPT
this.getFormValues = function(form, fncName) {
     var str = "";
     var fn = eval("this."+fncName);
     var nL = form.elements.length;
     for (var i = 0; i < nL; i++) {
          if (fn) {
               if (this.canSubmit) {
                    this.canSubmit = fn (form.elements[i]);
               } else {
                    break;
               }
          }
          if ((form.elements[i].type == 'radio') || (form.elements[i].type == 'checkbox')) {
               if (form.elements[i].checked) {
                    str += form.elements[i].name + "=" + escape(form.elements[i].value) + "&";
               }
          } else {
               str += form.elements[i].name + "=" + escape(form.elements[i].value) + "&";
          }
     }
     return str;
}

With JQuery $.each, I can do the follwing:

?View Code JAVASCRIPT
function getFormValues(form, fncName) {
     var str = "";
     var fn = eval(fncName);
     $(':input', $form).each(function(i) {
          if ((this.type == 'radio') || (this.type == 'checkbox')) {
               if (this.checked) {
                    str += this.name + "=" + escape(this.value) + "&";
               }
          } else {
               str += this.name + "=" + escape(this.value) + "&";
          }
     });
     str = str.substr(0, str.length-1);
     return str;
};

Using JQuery, I don’t have to get the form elements and the number of form elements. The ‘this’ keyword refers to the individual form element that is contained within the html form collection. But I can use the $.each method to iterate over more than just Dom elements. Take for example the following Json object:

?View Code JAVASCRIPT
var valMapRequestor = { "fields":
[{"id": "tFirstName", "label" : "First Name", "rules":
[{"name": "hasValue"}]
},
{"id": "tLastName", "label": "Last Name", "rules":
[{"name": "hasValue"}]
},
{"id": "tAddress1", "label": "Street Address", "rules":
[{"name": "eitherOr", "fields": [
{"id" : "tAddress2"}]}]
},
{"id": "tCity", "label": "City", "rules":
[{"name": "hasValue"}]
},
{"id": "tZipCode", "label": "Zip Code", "rules":
[{"name": "hasValue"}, {"name": "isNum"}]
},
{"id": "cbxReferredBy", "label": "ReferredBy", "rules":
[{"name": "hasValue"}]
},
{"id": "rdoGender", "label": "Gender", "rules":
[{"name": "isChecked", "fields": [
{"id" : "rdoGender"}]}]
},
{"id": "rdoResident", "label": "Resident", "rules":
[{"name": "isChecked", "fields": [
{"id" : "rdoResident"}]}]
},
{"id": "rdoInsurance", "label": "Insurance", "rules":
[{"name": "isChecked", "fields": [
{"id" : "rdoInsurance"}]}]
}]
}

To iterate over the Json object, I can do the following:

?View Code JAVASCRIPT
function validateFields(el) {
     var msg = '';
     var bSubmit = false;
     $.each(valMapRequestor.fields, function(i, itm) {
     if (itm.id == el.name) {
          $.each(itm.rules, function(j, rule) {
               var fn = eval(rule.name);
               if (rule.fields) {
                    bSubmit = fn (el.value, rule.fields);
               } else if (rule.exclude)	{
                    bSubmit = fn (el.value, rule.exclude)
               } else if ((rule.value) && (rule.condition)) {
                    bSubmit = fn (el.value, rule.value, rule.condition)
               } else {
                    bSubmit = fn (el.value);
               }
               if (!bSubmit) {
                   msg += itm.label + aMessages[rule.name] + "";
                   canSubmit = false;
               }
          });
     }
});

I use the $.each method to iterate over all of the valMapRequestor fields. If the itm.id value of valMapRequestor.fields value matches the el.name value, the $.each method then iterates over the valMapRequestor.fields.rules members.

Creating this same functionality using Javascript takes a bit of extra programming.

?View Code JAVASCRIPT
this.validateFields = function (el) {
     var canSubmit = false;
     if (self.valMap == '') {
          canSubmit = true;
     } else {
          var nL = valMapRequestor.fields.length;
          for (var i=0; i < nL; i++) {
               if (valMapRequestor.fields[i].id == el.name) {
                    var ln = valMapRequestor.fields[i].rules.length;
                    for (var j=0; j < ln; j++) {
                         var fn = eval("self."+self.valMap.fields[i].rules[j].name);
                         if (valMapRequestor.fields[i].rules[j].fields) {
                              canSubmit = fn (el.value, valMapRequestor.fields[i].rules[j].fields);
                         } else {
                              canSubmit = fn (el.value);
                        }
                        if (!canSubmit) {
                              self.message = self.aMessages[valMapRequestor.fields[i].rules[j].name];
                              break;
                        }
                    }
                   if (!canSubmit) {
                        self.message = {"type": "message", "label": ""+valMapRequestor.fields[i].label + self.message+""};
                        break;
                   }
               } else {
                    canSubmit = true;
               }
           }
      }
     return canSubmit;
}

When it comes to iterating over an object, JQuery is far more superior than using Javascript alone.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks