Login Register

dojo.forEach

JavaScript 1.6 has a forEach loop, where you can apply a certain function to each element of an array. Unfortunately at the time of this writing, only Firefox 2 has support for JS 1.6. But never fear! Dojo has defined one you can use in any Dojo-supported browser.

Foreach is syntactic sugar for a regular ol' for loop. So for example:

for(var i in queueEntries){
   console.debug(queueEntries[i]);
}

Can be written as:

dojo.forEach(queueEntries,
    function(oneEntry, index, array) {
        console.debug(oneEntry + " at index " + index);
    }
);

Like dojo.connect, we use an anonymous function here to define the operation. This function must accept between one and three arguments. The first argument is the value of each value in the array in turn, the second is the current index or position in the array, and the third argument is the array itself.

For this simple loop, forEach isn't anything exciting. But combined with other Dojo functions, especially dojo.query(), it becomes remarkably useful. Consider this snippet, which disables all SELECT tags on the page:

dojo.forEach(
    dojo.query("select", document),
    function(selectTag) {
        selectTag.disabled = true;
    }
);

How cool is that? (Answer: very!) There's no monkeying around with DOM functions, no using tedious names or id's, and it continues to work even when you add new SELECT tags.

Running dojo.forEach on a dojo.query result is so common, that Dojo defines a shortcut. This snippet:

dojo.query("select", document).forEach(
    function(selectTag) {
        selectTag.disabled = true;
    }
);

does the same thing. But that's not all! New in 1.0 you can collapse the function down to its body, passed in as a string like so:

// 1.0 only.
dojo.query("select", document).forEach("item.disabled = true;");

Ay carumba! That's a lot of functionality in a tiny 1-line package. Once you get used to the syntax, you'll never want to go back.

There's more on dojo.query in Selecting DOM Nodes with dojo.query

How do you reference parent object variables?

See code snippet below. Can I reference this.myVariable from within the forEach's anonymous function?

dojo.declare("foo.bar.MyWidget",
[ dijit._Widget, dijit._Templated ],
{
myVariable: "hello world",

....

myFunction: function (stuff) {
dojo.forEach (stuff,
function (item) {
// Can I reference this.myVariable here? If so, how?
});
},

....
});

--Joshua

In the future, please post

In the future, please post support question in the Forums.
dojo.forEach(array, function(n) {
    //do something with n
    n.doSomething();
    //do something with obj
    this.doSomething();
}, obj);
-Karl

Array.forEach conflict Microsoft AJAX Library

I use the dojo toolkit within DotNetNuke, which adopted the MS AJAX library earlier this year. In one of my dojo implementations a conflict occurs with the Arrary.forEach method, The MS AJAX library has a defined "Array" object with a "forEach" method, Array.forEach(). Because of this the dojo usage of the Javascript 1.6 Array.forEach is overridden by this MS method.

Therefore, I am forced to ALWAYS use the dojo alternative to the dojo JS 1.6 Array.forEach call.

Did Microsoft, in its AJAX library implementation, actually turn a blind eye to this method in the JS 1.6 standard? It wouldn't surprise me.