top of page
Hello Repeaters

Hello Repeaters

Get started with repeaters.

Intermediate.png

Beginner

2K

Published:

December 18, 2022

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

A repeater is a list of items that have the same design and layout, but different content that you can customize per item. In this example, we demonstrate how to populate repeaters using code. We demonstrate this in 3 different ways on 3 different pages. First using static data, then using data from a database collection, and finally using data fetched from a 3rd party API.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

Collection Data


To demonstrate populating a repeater using collection data, we created a collection named 'Greetings'. The collection holds the greeting "Hello World!" in a number of different languages.


Page Elements


Each of the 3 pages in the site contain the same page elements. The pages each contain a repeater, in which each item contains 3 text elements. The first displays the greeting language, the second displays the greeting itself, and the third displays the index of the repeater item.


Code


Some of the code is the same on all 3 pages. Each page contains the same `onItemReady` event handler that defines how to set up each new repeater item when the repeater's data property is set. 


The event handler sets the text in each of the 3 text elements and also adds `mouseIn` and `mouseOut` event handlers to each item container. The event handler provides 3 parameters. A scoped $item selector function which we use to select the correct instance of the repeated element, an `itemData` object from the repeater's data array that corresponds to the current item, and its `index` in the array.


The rest of the code on each of the 3 pages differs a bit from page to page.

  • STATIC DATA page: The code begins with a static definition of an array of objects. Each object contains an `_id` property with a unique value. This is important because the repeater will check this value to determine if any items have been added or removed each time the repeater's `data` property is set. The repeater's data is set on this page after the `onItemReady` definition by assigning the static array to the repeater's `data` property.

  • COLLECTION DATA page: The code begins by importing the `wix-data` API since we use it to query the 'Greetings' collection. After the `onItemReady` definition, we perform the query and store the returned items in the `collectionData` variable. Since collection data is already returned as an array of objects, each with a unique `_id` value, all we need to do is assign the returned items to the repeater's `data` property.

  • EXTERNAL DATA page: The code begins by importing a function from a backend module that fetches data from an external 3rd party API. After the `onItemReady` definition we call the function that gets the data from the external API. Since the data from the 3rd party does not contain the `_id` properties and values that we need for repeaters, we create those values and only then assign the fetched data to the repeater's `data` property.

APIs We Used

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Image placeholder.png

Add to Cart Gallery

Let customers to add products to their cart

Intermediate.png

INTERMEDIATE

Image placeholder.png

Hide and Show Elements

Hide and show elements in response to user interactions

Begginer.png

BEGGINER

Image placeholder.png

Hide and Show Elements

Hide and show elements in response to user interactions

Begginer.png

BEGGINER

Anchor 2
bottom of page