Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFinNC 2009 (Raleigh, North Carolina) with:

Ask Ben: Iterating Over An Array With jQuery

By Ben Nadel on

Hi; I'm new to jquery. I have php array like:

$arr = array("one", "two", "three");

I would like to convert this array ( or copy its values) to jquery array and use .each. can someone show me this .

There are two different "each" methods in jQuery. One of them works on the jQuery stack (of DOM elements) and one of them is a utility object. They very might well work off of each other behind the scenes, but from an API view, these are two different methods with two different purposes. Luckily, the $.each() jQuery utility method does exactly what you need it to.

In the following demo, we are gonna take a Javascript array and, without any need to convert it to a jQuery array, loop over its values and add them to the document object model (DOM):

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html>
  • <head>
  • <title>Looping Over Arrays With jQuery</title>
  •  
  • <!-- Linked files. -->
  • <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
  • <script type="text/javascript">
  •  
  • // Init the page once the DOM has loaded.
  • $( InitPage );
  •  
  •  
  • // Init the page.
  • function InitPage(){
  • // Get a refernce to the OL list element.
  • var jList = $( "#list" );
  •  
  • // Create our test array.
  • var arrValues = [ "one", "two", "three" ];
  •  
  • // Loop over each value in the array.
  • $.each(
  • arrValues,
  • function( intIndex, objValue ){
  •  
  • // Create a new LI HTML element out of the
  • // current value (in the iteration) and then
  • // add this value to the list.
  • jList.append(
  • $( "<li>" + objValue + "</li>" )
  • );
  • }
  • );
  •  
  • }
  •  
  • </script>
  • </head>
  • <body>
  •  
  • <h1>
  • Looping Over Arrays With jQuery
  • </h1>
  •  
  • <p>
  • Array Items:
  • </p>
  •  
  • <!---
  • This is the list into which we will be storing
  • the array items.
  • --->
  • <ol id="list">
  • <!--- List items will be added dynamically. --->
  • </ol>
  •  
  • </body>
  • </html>

Notice that the $.each() method takes two parameters - the current index of the array iteration and the value that was found in the array at that index. Once we have this value, we simply use jQuery to add it to the ordered list element on the page. Running the above code, our rendered page looks like this:

Array Items:

1. one
2. two
3. three

Now, looking at this code, it might seem that the $.each() method is actually more work than a standard FOR index-loop; and, at face value, it is. But, with this small bit of additional overhead, $.each() gives us a load of benefits. By passing each iteration value to a function, we create a new local scope in which to work, we create a Closure that has awesome potential, and we create a new variable for each loop value which removes many conflicts one can run into when binding event handlers.




Reader Comments

@Ray,

I think that's how Prototype does it; but since jQuery doesn't alter the core javascript objects, there is no each() method in the javascript array class (at least not that I know of).

Reply to this Comment

I'm still confused though. How does the browser know that you are iterating over some variable? All you have is $. What if you had 2 arrays? Where is the 'link' - does that make sense? It would be like me doing

<cfoutput>#arrayLen()#</cfoutput>

withouth passing an array.

Reply to this Comment

@Ray,

I think I see what you're saying. The confusion, I think, comes from the fact that when you are dealing with the jQuery stack, you can call .each() directly on that stack:

jQueryVariable.each( fnCallback );

The $.each() utility method, on the other hand, does *not* know what variable it is acting on. That is why the $.each() method takes the target variable as its first argument:

$.each( AnyArrayVariable, fnCallback );

In either case, the "this" scope of the loop points to the current iteration value. In the former example, "this" points to the current DOM element; in the latter case, the "this" scope points to the array value (one, two, or three).

To be honest, I would not be surprised if the jQueryVariable.each() method actually turned around and called the utility method on its own internal stack.

Reply to this Comment

@Ben,

Exactly right. Also internally it $().each() does call $.each() to iterate the stack :)

Reply to this Comment

@Shuns,

Thanks for the clarification. I figured it would do as much just to cut down on code duplication.

Reply to this Comment

@Ray,

I'm quite new to jQuery, but I think it's also possible to convert the array to a jQuery object and iterate it directly via each.

The jQuery intelligently handles different datatypes given as first param (selector) in init method (at least in version 1.3.2 I'm using) so these two examples should do the same thing.

// Give the array as parameter to jQuery.each
$.each(["one", "two", "three"], function(index) {
console.debug(index + ': ' + this);
});

// Give the array to $ and iterate the returned jQuery array object using its each method
$(["one", "two", "three"]).each(function(index) {
console.debug(index + ': ' + this);
});

Same amount of code though, no major difference here.

Reply to this Comment

@Perttu,

I am not 100% sure, but I think underneath, the $().each() method actually uses the $.each() method behind the scenes; so, to you're point, either way is good.

Reply to this Comment

Very simple implementation hash table.

//code
var Hash = function(){
var indexes = new Array();
var values = new Array();
//objHash.set('indexName', 123)
this.set = function(name,value){
var locationIndex = indexes.indexOf(name);
if(locationIndex==-1){
locationIndex = indexes.length;
indexes[locationIndex] = name;
}
values[locationIndex] = value;
}
//objHash.get('indexName')
this.get = function(name){
return values[indexes.indexOf(name)];
}

//objHash.each(function(index,value))
this.each = function(callback){
document.write(indexes.length)
for(var i=0;i<indexes.length;i++){
callback(indexes[i], values[i]);
}
}
}

//Example usage:

var names = new Hash();
names.set('steven','name@email.com');
document.write("Find " + names.get('steven') + "<br />");

names.each(function(index,value){
document.write("<li>" + index + " - "+value+"</li>");

Reply to this Comment

Thanks:) Your blog rocks I read it everyday and syndicate it with twitter @seacloud9! Your tips save me time I owe you one:)

Reply to this Comment

Hello Ben,
I am trying to use the each statement to iterate through each item I have retrieved from the database or xml or json to absolutely position each on places which is defined in an array so that these items don't overlap each other , so I was thinking if you know how to do it as I cannot do it :( , I think I can do it by making a defined array with position value left and top and for each intindex a new position is given from the array. if you can help them please help me.

Thanks
Aimash

Reply to this Comment

.each(), iteration loop begins with value 0, how to set the initial value to 1. I want the loop to start from 1 not 0?

Reply to this Comment

@Santosh,

You could edit the core jQuery code; but that would only lead to trouble down the road. Everything in Javascript starts at zero. However, if you want to use a one-based system, I typically just alter the index value at the top of the loop.

.each(function(i,value){
i++; // Increments the i value.
});

Since the "i" index value is unique to each iteration of the callback, you won't have to worry about corrupting anything in future iterations.

Reply to this Comment

Obviously, I'm too stupid to understand, but the question is ... how do I convert a PHP array to a jquery array. Then you start with a javascript array!
Well, duh. How do you get the array from php to jquery, which is, in reality, javascript.
You kinda left out the most important part!

Reply to this Comment

@Churchie,

No one is stupid here :) We're all just having some good conversation! As far as PHP, I don't know enough about the PHP syntax to help you exactly - but, I can try to show you how to do in ColdFusion to get the work flow:

// Create a ColdFusion array.
<cfset cfArray = [ 1, 2, 3 ] />

... now, here are a *few* ways to go from a ColdFusion array to a Javascript array:

// Convert CF array to Javascript array.
var jsArray = [ #arrayToList( cfArray )# ];

// Convert CF array to Javascript array using JSON.
var jsArray = #serializeJSON( cfArray )#;

// Convert CF array to Javascript array manually.
var jsArray = [];
<cfloop index="item" array="#cfArray#">
jsArray[ jsArray.length ] = "#item#";
</cfloop>

... I know PHP must be different, but I hope that helps a bit?

Reply to this Comment

@Churchie,

you could try echoing a string of joined PHP array in to the javascript

<?php
$phpArray = Array{"one","two","three"};

// convert it into string by using php join()
$phpString = "'".join("','",$phpArray)."'"; // 'one','two','three'

// echo it (write it to the source)

echo "var jsArr=[ $phpString ];";

?>

and when the page loaded you will have a javascript array

var jsArr=[ 'one','two','three' ];

Hope it helps

Reply to this Comment

Really nice site ben, hat off to ya.

@churchie
php to jquery array:

I ususally use $.ajax then pull in the data from a php file on my server, php5 has a function to convert a recordset into a json object which you can just echo out, then in the success function of the ajax call you have the data as a json object.

hope thats of some use to you.

Reply to this Comment

@All:

jQuery also has jQuery.map(), as opposed to the chained .map(). The chained .map() transforms one jQuery collection into a different one. But jQuery.map() does iteration, without the overhead of having to build a jQuery collection.

jQuery.map() has been able to iterate over a non-jQuery array since version 1.0. As of 1.6 (released just this week!), however, it can now iterate over the properties of an object.

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

Reply to this Comment

Hi Ben.

hey, this post gave me some ideas on a problem i had to solve. i needed to convert a large multi-dimensional array with object elements into a nested unordered list. just wanted to let you know that your content helps out, once again!

chris

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.