Skip to main content
Ben Nadel at cf.Objective() 2010 (Minneapolis, MN) with: Pat Santora
Ben Nadel at cf.Objective() 2010 (Minneapolis, MN) with: Pat Santora

Ask Ben: Iterating Over An Array With jQuery

By
Published in , — Comments (36)

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.

Want to use code from this post? Check out the license.

Short link: https://bennadel.com/1399

Reader Comments

15,902 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).

362 Comments

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.

15,902 Comments

@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.

1 Comments

@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.

15,902 Comments

@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.

1 Comments

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

1 Comments

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

1 Comments

.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?

15,902 Comments

@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.

1 Comments

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!

15,902 Comments

@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?

2 Comments

@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

1 Comments

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.

290 Comments

@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/

9 Comments

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

Oh my chickens, this post is old!
I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
— Ben Nadel