Hello Repeaters

Populate a repeater.

Introduction Last updated: 28 Mar 2025

Open Example Preview

About

In this example, we demonstrate how to populate a repeater using different data sources across 3 site pages: 

• Static Data: Displays fixed information from the page code in the repeater. 
• Collection Data: Displays data retrieved from a database collection using the Wix Data API. 
• External Data: Displays data retrieved from an external source using the Wix Fetch API. 

This example illustrates practical applications of repeaters in different scenarios.

APIs

• $w.Repeater API
• Data - Items

How we built it

We added the following to our site:

Page Elements

The Static Data, Collection Data, and External Data pages all contain the same repeater element. The repeater items contain text elements to display a greeting, the language of the greeting, and the index of the item.

Collections

Greetings: A collection containing a greeting and the language of that greeting.

Frontend Code

The code in all 3 files sets the repeater data from different sources and defines how the repeater items are displayed by setting the text for the language, greeting, and index fields.  

Static Data

In this file, we: 

• Define a `staticData` array of objects containing the static greeting information. 
• Set the repeater’s data to the static data array.

Collection Data

In this file, we:

• Retrieve data from the Greetings collection database.
• Set the repeater’s data to the retrieved collection data. 

External Data

In this file, we:

• Retrieve data from the backend `fetchGreetings` module. 
• Add unique ID values to each greeting item from the retrieved data.
• Set the repeater’s data to the updated external data (with IDs).

Backend code

fetchGreetings.web.js

The code in this file retrieves greeting information from an external source with the following method: 

• `fetchGreetings()`: Calls the native `fetch()` API to retrieve the greeting information and then returns the data.

Code Snippets

Get Help

Join the community

Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.

Hire a developer

Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.