Search.../

data

Sets or gets the repeater data.

Description

A repeater's data is stored as an array of objects. Each object in the array must contain a unique _id property which is used to match the object's data to the individual repeated items of the repeater as described below. The value of the _id property can only contain alphanumeric characters (A-Z, a-z, 0-9) and hyphens (-). Other than _id, the objects in the repeater's data array can contain anything you want.

For example, a simple array of repeater data may look like this:

[
{
"_id": "1",
"firstName": "John",
"lastName": "Doe",
"image": "http://someImageUrl/john.jpg"
},
{
"_id": "2",
"firstName": "Jane",
"lastName": "Doe",
"image": "http://someImageUrl/jane.jpg"
}
]
javascript | Copy Code

Repeater data is not automatically applied to the elements in the repeated items. You choose how to use the repeater's data in the onItemReady(), onItemRemoved(), forItems(), and forEachItem() callback functions. Most often, you apply the data of a repeated item to the properties and functions of the repeated elements contained in that repeated item.

Typically, you use the onItemReady() function to set a callback that populates the repeater's elements with the item data from the data array. The callback is triggered for each new item in the data array as described below. Then, you might use the forItems() and forEachItem() functions to modify repeater elements at some point after the data is originally set.

Because setting a repeater's data property triggers the onItemReady() callback to run, make sure you call onItemReady() before you set the data property. Failing to do so will mean that your callbacks are not triggered when you set the data property.

You cannot modify the data array in-place. To add, change, or remove objects from the repeater's data array:

  1. Store the value of the data property in a variable.
  2. Make changes to the objects of the data array.
  3. Reset the data property with the modified array.

When the repeater's data property is set:

  1. New repeated items are created for each object that has an _id value that is not already present in the current array of data objects. The elements in the new items are first populated with the data of the repeater's item template. Then the onItemReady() event handler is triggered for each of the new items. Usually, you overwrite some or all of the data populated from the item template in the onItemReady() event handler with the data for that specific item. When all of the onItemReady() event handlers have finished running, the new items are displayed.
  2. Repeated items are removed if their IDs are no longer in the array of data objects. The onItemRemoved() event handler is triggered for each of the removed items.
  3. Nothing occurs to repeated items whose IDs were already in the array of data objects, even if other data in the object has changed. To update repeated items with the new data, use the forEachItem() or forItems() functions.

Getting the data property returns the repeater's current data. If you have not yet explicitly set the repeater's data, getting the data property returns only the IDs of the current repeated items that were set in the Editor.

Type:

Array<Object>Read & Write

Was this helpful?

Get a repeater's data

Code Example

Copy Code
1let repeaterData = $w("#myRepeater").data;
Set a repeater's data

Code Example

Copy Code
1const bikeData = [
2 {
3 "_id":"bike1",
4 "img":"wix:image://v1/6875c086ef453f5727c2b5932b3b3be4.png/Red Bike#originWidth=550&originHeight=300",
5 "kind":"Red Bike"
6 },
7 {
8 "_id":"bike2",
9 "img":"wix:image://v1/703b4af24578ada6f1e11725a468096e.png/Speed Bike#originWidth=550&originHeight=300",
10 "kind":"Black Bike"
11 },
12 {
13 "_id":"bike3",
14 "img":"wix:image://v1/2bb3219153c347daf475067d763be40d.png/Neon Bike#originWidth=550&originHeight=300",
15 "kind":"Green Bike"
16 }
17];
18
19$w("#myRepeater").data = bikeData;
Set a repeater's data from a database query

Code Example

Copy Code
1import wixData from 'wix-data';
2
3$w.onReady(function () {
4 $w("#myRepeater").onItemReady( ($item, itemData, index) => {
5 $item("#bookTitle").text = itemData.title;
6 $item("#bookSubtitle").text = itemData.subtitle;
7 $item("#bookCover").src = itemData.pic;
8 } );
9
10 wixData.query("Books")
11 .find()
12 .then( (results) => {
13 $w("#myRepeater").data = results.items;
14 } );
15} );
Modify a repeater's data

Code Example

Copy Code
1// get current data array
2let dataArray = $w("#myRepeater").data;
3
4// change something in the data array
5dataArray[0].somefield = "New value";
6
7// reset repeater data
8$w("#myRepeater").data = dataArray;
Set a repeater's data

This example defines an event handler to handle the creation of new items and sets a repeater's data.

Code Example

Copy Code
1// static repeater data
2const bikeData = [
3 {
4 "_id":"bike1",
5 "img":"wix:image://v1/6875c086ef453f5727c2b5932b3b3be4.png/Red Bike#originWidth=550&originHeight=300",
6 "description":"Red Bike"
7 },
8 {
9 "_id":"bike2",
10 "img":"wix:image://v1/703b4af24578ada6f1e11725a468096e.png/Speed Bike#originWidth=550&originHeight=300",
11 "description":"Black Bike"
12 },
13 {
14 "_id":"bike3",
15 "img":"wix:image://v1/2bb3219153c347daf475067d763be40d.png/Neon Bike#originWidth=550&originHeight=300",
16 "description":"Green Bike"
17 }
18];
19
20$w.onReady(function () {
21 // handle creation of new repeated items
22 $w("#myRepeater").onItemReady( ($item, itemData, index) => {
23 $item("#image1").src = itemData.img;
24 $item("#text1").text = itemData.description;
25
26 $item("#image1").onClick( (event) => {
27 $item("#text1").text = "Selected";
28 } );
29 } );
30
31 // set the repeater data, triggering the creation of new items
32 $w("#myRepeater").data = bikeData;
33} );
34
Set a repeater's data and add new data on a button click

This example defines an event handler to handle the creation of new items and sets a repeater's data. It also adds an event handler to an "addButton" that is not part of the repeater. Clicking the button resets the repeater's data, adding another item.

Code Example

Copy Code
1// static repeater data part 1
2const bikeData1 = [
3 {
4 "_id":"bike1",
5 "img":"wix:image://v1/6875c086ef453f5727c2b5932b3b3be4.png/Red Bike#originWidth=550&originHeight=300",
6 "description":"Red Bike"
7 },
8 {
9 "_id":"bike2",
10 "img":"wix:image://v1/703b4af24578ada6f1e11725a468096e.png/Speed Bike#originWidth=550&originHeight=300",
11 "description":"Black Bike"
12 }
13];
14
15// static repeater data part 2
16const bikeData2 = [
17 {
18 "_id":"bike3",
19 "img":"wix:image://v1/2bb3219153c347daf475067d763be40d.png/Neon Bike#originWidth=550&originHeight=300",
20 "description":"Green Bike"
21 }
22];
23
24$w.onReady(function () {
25 // handle creation of new repeated items
26 $w("#myRepeater").onItemReady( ($item, itemData, index) => {
27 $item("#image1").src = itemData.img;
28 $item("#text1").text = itemData.description;
29
30 $item("#image1").onClick( (event) => {
31 $item("#text1").text = "Selected";
32 } );
33 } );
34
35 // set the repeater data to be the first part of the static data,
36 // triggering the creation of new items
37 $w("#myRepeater").data = bikeData1;
38
39 // add a handler for the "add" button that resets the repeater data
40 // to be both parts of the static data, triggering the creation of
41 // a new item
42 $w("#addButton").onClick( () => {
43 let tempData = $w("#myRepeater").data;
44 $w("#myRepeater").data = tempData.concat(bikeData2);
45 } );
46} );
47
Set the a repeater's data and remove some data on a button click

This example defines event handlers to handle the creation of new items and the removal of existing items. Then it sets a repeater's data. Lastly, it adds an event handler to a "removeButton" that is not part of the repeater. Clicking the button resets the repeater's data, removing one of the items.

Code Example

Copy Code
1// static repeater data
2const bikeData = [
3 {
4 "_id":"bike1",
5 "img":"wix:image://v1/6875c086ef453f5727c2b5932b3b3be4.png/Red Bike#originWidth=550&originHeight=300",
6 "description":"Red Bike"
7 },
8 {
9 "_id":"bike2",
10 "img":"wix:image://v1/703b4af24578ada6f1e11725a468096e.png/Speed Bike#originWidth=550&originHeight=300",
11 "description":"Black Bike"
12 },
13 {
14 "_id":"bike3",
15 "img":"wix:image://v1/2bb3219153c347daf475067d763be40d.png/Neon Bike#originWidth=550&originHeight=300",
16 "description":"Green Bike"
17 }
18];
19
20$w.onReady(function () {
21 // handle creation of new repeated items
22 $w("#myRepeater").onItemReady( ($item, itemData, index) => {
23 $item("#image1").src = itemData.img;
24 $item("#text1").text = itemData.description;
25
26 $item("#image1").onClick( (event) => {
27 $item("#text1").text = "Selected";
28 } );
29 } );
30
31 // handle removal of new repeated items
32 $w("#myRepeater").onItemRemoved( (itemData) => {
33 console.log(`Removed: ${JSON.stringify(itemData)}`);
34 } );
35
36 // set the repeater data to be the first part of the static data,
37 // triggering the creation of new items
38 $w("#myRepeater").data = bikeData;
39
40 // add a handler for the "remove" button that resets the repeater data
41 // with the middle object removed, triggering the removal of the middle
42 // repeated item
43 $w("#removeButton").onClick( () => {
44 let tempData = $w("#myRepeater").data;
45 tempData.splice(1,1);
46 $w("#myRepeater").data = tempData;
47 } );
48} );
49