Super Flexible JavaScript Object and Array Iteration with jQuery.each()

The jQuery.each() method makes it trivial to iterate over or inspect any kind of collection: arrays, objects, array-like objects, even jQuery DOM Objects.

Working with JavaScript means working with Objects. There is almost no way around this. So even in the simplest of scenarios, at some point you are likely to encounter an object and you need to inspect it.

Keep in mind that in JavaScript, there are different kinds of objects. For example, an array is an object. And, a DOM element is an object. It’s no secret that I am a huge fan of the JavaScript “For/In” loop. If you are not able to use jQuery then that is your go-to tool for object inspection. If you are using jQuery, then the static .each() method is a real winner.

It is important to make sure you understand that this is not the same thing as the $().each() method. When you pass a CSS selector to jQuery and then call the .each() method on the collection that is returned, you are calling a different method in jQuery. It is very similar, but that syntax is meant especially for DOM collections.

The jQuery.each() method is a static method of the jQuery object. It is a more generalized method that can be used to iterate over any object, array or array-like object. So the syntax is quite simple:

jQuery.each(OBJECT,CALLBACK);

1	jQuery.each(OBJECT,CALLBACK);

The OBJECT argument is any object, array or array-like object. The CALLBACK argument can be an inline anonymous function, a named function expression or a variable that points to an anonymous function.

Example # 1

$.each(['monday', 'tuesday', 'wednesday'], function(index, value) {
  console.log(value);
});

$.each(['monday', 'tuesday', 'wednesday'], function(index, value) {

console.log(value);

});

In Example # 1, we have provided a simple array: three strings, each representing a corresponding day of the work week. The callback function executes for each one of the array elements, and inside of that function the variable “value” represents the value of that array element. We could have called that variable “baseball”; it doesn’t matter what you call it. The most important thing to remember is that the second argument to the callback will return the value of the current array element that is being iterated over. So, simple stuff.

Here is a JSBin link for Example # 1: http://jsbin.com/epanov/1/edit

Example # 2

$.each(['monday', 'tuesday', 'wednesday'], function(index, value) {
  console.log(index + ': ' + value);
});

$.each(['monday', 'tuesday', 'wednesday'], function(index, value) {

console.log(index + ': ' + value);

});

In Example # 2, we take advantage of the “index” argument. In the console, we output the value of that variable. Again, this variable can be named anything. As with “value”, it’s most important to be aware that the first argument of the callback will return the index of the array element that is currently being iterated over.

Here is a JSBin link for Example # 2: http://jsbin.com/epezuc/1/edit

Example # 3

$.each(['monday', 'tuesday', 'wednesday',], function(index, value) {
  console.log( value.replace('day', '') );
});

$.each(['monday', 'tuesday', 'wednesday',], function(index, value) {

console.log( value.replace('day', '') );

});

In Example # 3, we take things a step further to illustrate the fact that we can not only access the value of the current array element, but we can do things with it. Here, we simply remove ‘day’ from the string. But there is certainly a whole lot more that one might do. For example, if these array elements were objects instead of primitive strings, we could make changes to the objects and the next person or function who reached for that object would find it changed.

Here is a JSBin link for Example # 3: http://jsbin.com/okoxej/1/edit

Example # 4

var data = [
  {name: 'R Jones',accountNumber: 10203},
  {name: 'K Frost',accountNumber: 242526},
  {name: 'J Sommers',accountNumber: 717273}
];

$.each(data, function(index, value) {
  console.dir(value);
});

var data = [

{name: 'R Jones',accountNumber: 10203},

{name: 'K Frost',accountNumber: 242526},

{name: 'J Sommers',accountNumber: 717273}

];

$.each(data, function(index, value) {

console.dir(value);

});

In Example # 4, we move the object out of the jQuery.each() call and then simply reference it as the variable “data”. This time we have provided an array of objects. So on each iteration of the callback, instead of simply outputting a string, we are inspecting an object.

Here is a JSBin link for Example # 4: http://jsbin.com/usewoj/1/edit

Example # 5

var data =   {
    name: 'R Jones',
    accountNumber: 10203,
    phoneHome: '212-555-1212',
    phoneMobile: '212-555-1313'
  };

$.each(data, function(index, value) {
  console.log(index + ': ' + value);
});

var data = {

accountNumber: 10203,

phoneHome: '212-555-1212',

phoneMobile: '212-555-1313'

};

$.each(data, function(index, value) {

console.log(index + ': ' + value);

});

In Example # 5, things get even more interesting. Here, we can see the brilliance of the jQuery.each() method. In this case we provide an object literal as the first argument to the .each() method. When an object is passed in, then the value of the “index” variable will be the name of the key or property of the object. So this saves you the time it would take to roll your own “For/In” loop.

Here is a JSBin link for Example # 5: http://jsbin.com/examuz/1/edit

Example # 6

$.each( $('li.weekend')), function(index, value) {
  $(this).css('color','red');
});

$.each( $('li.weekend')), function(index, value) {

$(this).css('color','red');

});

In Example # 6, the object that is provided is a jQuery collection object. So now, on each execution of the callback, we can use $(this) to reference the jQuery DOM element object that is being iterated over, and of course do all the usual kinds of fun things to the element with jQuery.

Here is a JSFiddle link for Example # 6: http://jsfiddle.net/n7PRD/

Example # 7

var
data1 =   {
   name: 'R Jones',
   accountNumber: 10203,
   phoneHome: '212-555-1212',
   phoneMobile: '212-555-1313'
 }, 
data2 =   {
   name: 'S Frost',
   accountNumber: 919293,
   phoneHome: '212-555-1234',
   phoneMobile: '212-555-4321'
 };

var inspect = function(index, value) {
 console.dir(value);
};

$.each([data1, data2], inspect);

var

data1 = {

accountNumber: 10203,

phoneHome: '212-555-1212',

phoneMobile: '212-555-1313'

data2 = {

accountNumber: 919293,

phoneHome: '212-555-1234',

phoneMobile: '212-555-4321'

};

var inspect = function(index, value) {

console.dir(value);

};

$.each([data1, data2], inspect);

And here, in Example # 7, we have abstracted the callback. Instead of providing an inline anonymous function, we provide a reference to a variable that is a function: “inspect”. So, that function will be called for every element provided in the data. The data we have provided in an array, and each element of that array is an object with some user account data. Phew! So, on each iteration of the callback (which is really the variable “inspect”, which is a function), we output the contents of that object to the console. We certainly could have done much more here, but the point of the example is that you can abstract any aspect of this that you like. So, as you can see, there is a ton of flexibility here and you are only limited by your imagination.

Here is a JSBin link for Example # 7: http://jsbin.com/iriwer/1/edit

Summary

In this article we learned a bit about the jQuery.each() method. We discussed the simple syntax, as well as the two arguments that are used in the callback. We also explored multiple scenarios such as inspecting an array of strings, inspecting an array of objects, inspecting objects and inspecting jQuery DOM objects.

Helpful Links for the jQuery.each() Method.

http://api.jquery.com/jQuery.each/

http://www.jquery4u.com/jquery-functions/jquery-each-examples/

http://stackoverflow.com/questions/722815/jquery-each-practical-uses