Dojo in XPages – 8: Processing Each Element in a NodeList with forEach()

In the last post, we looked at using dojo.query() to select elements on the page. In this post, I’ll show how to process each element in the NodeList returned from dojo.query().

Dojo in XPages Series

Dojo in XPages — All Blog Posts

NodeList Methods

There are a number of methods available to process dojo NodeLists, but most of them are very similar to JavaScript array processing methods, so I won’t go into detail here.

Take a look at the dojo documentation for more information.

dojo.forEach()

The method I want to focus on is dojo.forEach(), because it can be used to process a NodeList that you select with using dojo.query()

Since dojo.query() returns a NodeList, you can just tack on the forEach() method to process it in the same statement. This is the syntax:

dojo.query('someQuery').forEach(function(node, index) { 
 logic here...
});

The forEach() method takes an anonymous callback function to process each node. That function will automatically receive parameters for the individual node and index number of that node being processed. The parameter names don’t matter and you don’t have to specify them at all if you don’t need to use them (although you generally want to at least have a handle to the node).

Here’s an example of getting a handle to all fields on the page and printing their values (and index number) to the console:

dojo.query('input').forEach(function(node, index) {
  console.log(index + ': ' + node.value);
});

Dojo 8a

Here’s an example of automatically setting the value of each field on the page:

dojo.query('input').forEach(function(node, index) {
  node.value = 'This is field ' + index;
});

Here is the result:

Dojo 8b

Up Next

Now that we know how to locate the elements we want to target and process the NodeList, we’ve got a great foundation to build upon. In the next few posts, we’ll look at more ways to manipulate elements on the page.

Advertisements

4 responses to “Dojo in XPages – 8: Processing Each Element in a NodeList with forEach()”

  1. Richard Moy says :

    Brad, one important thing to add, when you need to pass “this” you need to add it as a parameter to your dojo.forEach so your code will be

    dojo.query(‘input’).forEach(function(node, index) {
    node.value = ‘This is id ‘ + this.id + i;
    },this);

    This also applies to dojo.filter and if you are also apply the nodelist to an event

    dojo.query(‘somenode’).connect(‘someevent’,this,function(e){
    });

    When I forget I always will start getting undefined and I know that I forgot “this”

  2. Csaba Kiss says :

    In your third example, the second line should read:
    node.value = ‘This is field” + index;
    should it not?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: