Tutorial | Display Database Collection Content in a Repeater
This tutorial for beginners explains how to display database collection content in a repeater using code.
Note: You can also display database content in a repeater without any code using a dataset, but using code provides you with additional functionality and options.
The code in this article was written using the following module versions:
- @wix/data (v1.0.244)
Learn how to install npm packages in the editor or using the CLI.
About database collections and repeaters
Database collections store your site's data in structured records. Whether you're managing property listings on a real estate site or storing form submissions, collections organize your content into manageable datasets.
Repeaters are great for displaying collection data because they create consistent layouts for multiple items. Think of them as templates that repeat for each record in your collection, for example, showcasing property listings, blog posts, or product catalogs.
We'll use the following steps to display database collection content in a repeater:
- Query the database collection to retrieve your data.
- Bind the data to your repeater component.
- Map collection fields to specific repeater elements.
The result should look like this:
Step 1 | Add a repeater on your site
Add a repeater on your site.
Step 2 | Open the page code file
Open the code file for your page where you added the repeater. The way you open the file depends on the IDE you're using.
Step 3 | Query the database collection
This step retrieves all records from your collection and prepares them for display.
To query a collection, you'll need to get the collection ID. The way you get the ID depends on the editor you're using:
Now that you have the collection ID, you can query your data:
Learn more about using npm packages when developing sites.
- Run the query using the ID you retrieved above:
The query returns an array of items, where each item represents a record from your collection. Collection field IDs become object properties, so fields such as title, price, image, and url appear as properties with the same names in each result object.
Step 4 | Bind the data to a repeater
This step connects your queried collection data to the repeater, creating individual items for each record.
Set the repeater's data property to your collection results:
Note: This automatically triggers the repeater's onItemReady() event handler, which we'll use in the next step.
Step 5 | Map collection fields to specific repeater elements
This step defines how collection fields populate specific elements within each repeater item. For example, a title field might display in a text element, while a url field connects to a button's link property.
Use the onItemReady() event handler to map your data. This event runs automatically for each new element in the repeater's .data array and is used to connect collection values to repeater elements. The handler receives the $item selector, which selects specific instances of repeated elements.
In this example, title, price, image, and url are field IDs from the MyCollection database collection:
After applying the code to your page, you'll see your database content displayed in your repeater.
Complete code
Here is the complete code for the example: