Search.../
  1. APIs

forEachItem( )

Runs a function for each repeated item.

Description

Use the forEachItem() function to run a function on all of a repeater's repeated items. You can use the callback function to update or pull information from all of the repeater's repeated items.

When you set a repeater's data property with data that changes items with existing IDs, those changes are not automatically reflected in the elements contained in the repeater. That is because you are responsible for applying a repeater's data to its repeated items.

To apply the data to items with new IDs, you can use the onItemReady() event handler.

To update items with existing IDs, you can use the forEachItem() or forItems() functions.

Usually, when updating repeated items you:

  • Apply the repeated item's itemData to the properties and functions of the repeated elements contained in the repeated item being created.

    For example, you can use onItemReady() to set the src property of an image in the repeater to an image source found in the itemData object and then show() the image.

  • Add event handlers to the repeated elements contained in the repeated item being created.

    For example, you can use onItemReady() to set the onClick() event handler of a button in the repeater.

Note: When a page loads, datasets load after repeaters. To use forEachItem() with repeater data populated by a dataset, make sure to call it within the dataset's onReady() function.

Syntax

function forEachItem(callback: ForItemCallback): void
callback: function ForItemCallback($item: $w, itemData: Object, index: number): void

forEachItem Parameters

NAME
TYPE
DESCRIPTION
callback
ForItemCallback

The name of the function to run for each repeated item.

Returns

This function does not return anything.

Return Type:

void

ForItemCallback Parameters

NAME
TYPE
DESCRIPTION
$item
$w

A selector function with repeated item scope.

itemData
Object

The object from the repeater's data array that corresponds to the current repeated item.

index
number

The index of the itemData object in the data array.

Returns

This function does not return anything.

Return Type:

void

Was this helpful?

Loop through all of a repeater's repeated items

Copy Code
1$w("#myRepeater").forEachItem( ($item, itemData, index) => {
2  let repeatedElement = $item("#repeatedElement");
3  let nonRepeatedElement = $w("#nonRepeatedElement");
4  let itemDataValue = itemData.someProperty;
5  let isEvenItem = index % 2 === 0;
6} );
Update data in all of a repeater's repeated items

Copy Code
1$w("#myRepeater").forEachItem( ($item, itemData, index) => {
2  $item("#repeatedImage").src = itemData.img;
3  $item("#repeatedText").text = itemData.description;
4} );
Update data in all of a repeater's repeated items

This example uses a forEachItem() to override some of the data populated into a repeater that is connected to a dataset. Here we want a text element to contain text that changes based on the value of a certain boolean field. When a page loads, the dataset loads after the repeater. So we wait for the dataset's onReady() to call a forEachItem() that sets the desired values.

Copy Code
1$w.onReady(function () {
2  $w("#myDataset").onReady( () => {
3    $w("#myRepeater").forEachItem( ($item, itemData, index) => {
4      if(itemData.boolField){
5        $item("#myText").text = "Yes Ma'am!";
6      }
7      else {
8        $item("#myText").text = "No way!";
9      }
10    } );
11  } );
12} );
13