Velo Tutorial: Display Database Collection Content in a Repeater
This tutorial for Velo 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.
Overview
Database collections are where you store your site's data. For example, if you have a real estate site, you'll store details about each property in a collection. If you have a custom form on your site, you'll store the answers to the form in a collection.
You might want to display your database collection content in a repeater. Repeaters are lists of items. Each item has the same design and layout, but different content. If you have a real estate site, you can display each property and its details in a different repeater item.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2021/11/15/35bed2ce-5d5c-454c-8357-72d6b797d893/55b7f977-35f5-45af-9aed-500d3bf5c8bf.png)
To display database content in a repeater, we'll do the following:
- Query (extract data from) the database collection.
- Set the queried data as our repeater's data.
- Specify which fields of the queried collection data populate each element in our repeater.
Step 1: Query the Database Collection
To query a collection, you'll need to get the collection ID:
-
Select the Databases tab
in the Velo sidebar (Wix Editor) or Code sidebar (Wix Studio).
-
Hover over your collection, click the Show More icon
and select Edit Settings.
-
Copy the collection ID to use in your code.
Once you have the collection ID you can query the collection. We'll start by importing the wix-data
module, which contains the data query()
function. The wix-data
APIs contain functionality for working with your database collections with code.
1
We run the query on our MyCollection
database collection:
1
Understanding the Code
- Line 1: Run the
query()
function on theMyCollection
database collection. - Line 2: Complete the query by calling the
find()
function. - Line 3: Get the results of the query after the promise resolves.
- Lines 4-5: If there are results, print the result items to the console to view them.
- Lines 8-9: If there's an error, print the error to the console.
The query result items
are an array of objects representing each item in your database collection. For example, if you have database collection fields with field IDs named title
, price
, image
, and url
, you'll have properties in each object in your results object items
array called title
, price
, image
, and url
.
1
Step 2: Set the Repeater's Data
Setting a repeater's data adds new items to the repeater. We take the results of the query that we extracted from the database collection and set it as the repeater's data.
1
Setting a repeater's data also triggers the repeater's onItemReady() event handler.
Step 3: Connect Queried Data Fields with Repeater Elements
Now we need to specify which field from the queried database collection content connects to each repeater element. For example, the database field called title
might connect to a text element in the repeater, and a database field called url
might connect to a read more button's link
property.
We make the connection using the onItemReady()
function, which is used to apply the repeated item's data to the properties of the repeated elements. onItemReady()
is an event handler that is triggered when the items of the repeater are ready to be loaded. The event handler runs for each item in the repeater.
In the code below, title
, price
, image
, and url
are field IDs from the MyCollection
database collection.
$item
is a special selector which selects elements in a specific repeater item. The onItemReady()
function loops through each item in the repeater and connects the repeater elements in each item with the queried data.
1
Note The code for onItemReady() must be located before the code for setting the repeater's data.
After applying the code to your page, you'll see your database content displayed in your repeater.
Optional: Filter and Sort the Displayed Content
As an additional step, you can optionally chain WixDataQuery
functions to your query to filter, sort, and limit the results of the query.
For example, we filtered the items so that only properties whose price is less than $500,000 appear in the repeater. We also sorted the items in alphabetical order according to the property title. To do this we chained a 'less than' lt()
filter and a descending()
sort to the query, before executing the query with the find()
function:
1
Complete Code
Here is the complete code for the example:
1