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 must be a string and 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:
javascript | Copy Code[{"_id": "1","firstName": "John","lastName": "Doe","image": "http://someImageUrl/john.jpg"},{"_id": "2","firstName": "Jane","lastName": "Doe","image": "http://someImageUrl/jane.jpg"}]
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:
- Store the value of the
data
property in a variable. - Make changes to the objects of the data array.
- Reset the
data
property with the modified array.
When the repeater's data
property is set:
- 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 theonItemReady()
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 theonItemReady()
event handler with the data for that specific item. When all of theonItemReady()
event handlers have finished running, the new items are displayed. - 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. - 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()
orforItems()
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:
Was this helpful?
1let repeaterData = $w("#myRepeater").data;
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];1819$w("#myRepeater").data = bikeData;
1// get current data array2let dataArray = $w("#myRepeater").data;34// change something in the data array5dataArray[0].somefield = "New value";67// reset repeater data8$w("#myRepeater").data = dataArray;
In this example, we demonstrate how to populate repeaters using data from a collection. You can test out the code in our example template.
1import wixData from 'wix-data';23$w.onReady(async function () {4 // Define how to set up each new repeater item5 $w('#helloRepeater').onItemReady( ($item, itemData, index) => {6 $item('#languageText').text = itemData.language;7 $item('#helloText').text = itemData.greeting;8 $item('#indexText').text = (index + 1).toString();910 $item('#itemContainer').onMouseIn( () => {11 $item('#languageText').show();12 });1314 $item('#itemContainer').onMouseOut( () => {15 $item('#languageText').hide();16 });17 } );1819 // Get data from a database collection20 const {items: collectionData} = await wixData.query('Greetings').find();21 console.log(collectionData);2223 // Set the data to associate with the repeater24 $w('#helloRepeater').data = collectionData;25});26
In this example, we demonstrate how to populate repeaters using static data. You can test out the code in our example template.
1// Static array of objects, each containing a unique `_id` value2const staticData = [3 {_id: '1', language: 'English', greeting: 'Hello World!'},4 {_id: '2', language: 'French', greeting: 'Bonjour monde!'},5 {_id: '3', language: 'Japanese', greeting: 'こんにちは世界!'},6 {_id: '4', language: 'Portuguese', greeting: 'Olá Mundo!'},7 {_id: '5', language: 'Spanish', greeting: '¡Hola Mundo!'},8 {_id: '6', language: 'Ukrainian', greeting: 'Привіт Світ!'}9];1011$w.onReady(async function () {12 // Define how to set up each new repeater item13 $w('#helloRepeater').onItemReady( ($item, itemData, index) => {14 $item('#languageText').text = itemData.language;15 $item('#helloText').text = itemData.greeting;16 $item('#indexText').text = (index + 1).toString();1718 $item('#itemContainer').onMouseIn( () => {19 $item('#languageText').show();20 });2122 $item('#itemContainer').onMouseOut( () => {23 $item('#languageText').hide();24 });25 } );2627 console.log(staticData);2829 // Set the data to associate with the repeater30 $w('#helloRepeater').data = staticData;31});32
In this example, we demonstrate how to populate repeaters using data from an external source. You can test out the code in our example template.
1// Static array of objects, each containing a unique `_id` value2const staticData = [3 {_id: '1', language: 'English', greeting: 'Hello World!'},4 {_id: '2', language: 'French', greeting: 'Bonjour monde!'},5 {_id: '3', language: 'Japanese', greeting: 'こんにちは世界!'},6 {_id: '4', language: 'Portuguese', greeting: 'Olá Mundo!'},7 {_id: '5', language: 'Spanish', greeting: '¡Hola Mundo!'},8 {_id: '6', language: 'Ukrainian', greeting: 'Привіт Світ!'}9];1011$w.onReady(async function () {12 // Define how to set up each new repeater item13 $w('#helloRepeater').onItemReady( ($item, itemData, index) => {14 $item('#languageText').text = itemData.language;15 $item('#helloText').text = itemData.greeting;16 $item('#indexText').text = (index + 1).toString();1718 $item('#itemContainer').onMouseIn( () => {19 $item('#languageText').show();20 });2122 $item('#itemContainer').onMouseOut( () => {23 $item('#languageText').hide();24 });25 } );2627 console.log(staticData);2829 // Set the data to associate with the repeater30 $w('#helloRepeater').data = staticData;31});32
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.
1// static repeater data part 12const 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];1415// static repeater data part 216const bikeData2 = [17 {18 "_id":"bike3",19 "img":"wix:image://v1/2bb3219153c347daf475067d763be40d.png/Neon Bike#originWidth=550&originHeight=300",20 "description":"Green Bike"21 }22];2324$w.onReady(function () {25 // handle creation of new repeated items26 $w("#myRepeater").onItemReady( ($item, itemData, index) => {27 $item("#image1").src = itemData.img;28 $item("#text1").text = itemData.description;2930 $item("#image1").onClick( (event) => {31 $item("#text1").text = "Selected";32 } );33 } );3435 // set the repeater data to be the first part of the static data,36 // triggering the creation of new items37 $w("#myRepeater").data = bikeData1;3839 // add a handler for the "add" button that resets the repeater data40 // to be both parts of the static data, triggering the creation of41 // a new item42 $w("#addButton").onClick( () => {43 let tempData = $w("#myRepeater").data;44 $w("#myRepeater").data = tempData.concat(bikeData2);45 } );46} );47
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.
1// static repeater data2const 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];1920$w.onReady(function () {21 // handle creation of new repeated items22 $w("#myRepeater").onItemReady( ($item, itemData, index) => {23 $item("#image1").src = itemData.img;24 $item("#text1").text = itemData.description;2526 $item("#image1").onClick( (event) => {27 $item("#text1").text = "Selected";28 } );29 } );3031 // handle removal of new repeated items32 $w("#myRepeater").onItemRemoved( (itemData) => {33 console.log(`Removed: ${JSON.stringify(itemData)}`);34 } );3536 // set the repeater data to be the first part of the static data,37 // triggering the creation of new items38 $w("#myRepeater").data = bikeData;3940 // add a handler for the "remove" button that resets the repeater data41 // with the middle object removed, triggering the removal of the middle42 // repeated item43 $w("#removeButton").onClick( () => {44 let tempData = $w("#myRepeater").data;45 tempData.splice(1,1);46 $w("#myRepeater").data = tempData;47 } );48} );49