Velo Tutorial: Display Database Collection Content in a Repeater
Overview
- 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
- Select the Databases tab
in the Velo Sidebar. - 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 import wixData from 'wix-data';We run the query on our MyCollection database collection:
1 wixData.query('MyCollection')
2 .find()
3 .then((results) => {
4 if (results.totalCount > 0) {
5 console.log("Query results:", results.items);
6 }
7 })
8 .catch((error) => {
9 console.error(error);
10 }); Understanding the Code
- Line 1: Run the
query()function on theMyCollectiondatabase 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 keys 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[
2 {
3 "_id": "1234",
4 "_createdDate": "2021-05-29T08:35:52.344Z",
5 "title": "DOWN AVENUE",
6 "price": 500,000,
7 "image": "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/down-avenue.jpg",
8 "url": "https://users.wixsite.com/best-real-estate-site/listings/down-avenue"
9 },
10 {
11 "_id": "5678",
12 "_createdDate": "2021-05-25T12:48:56.572Z",
13 "title": "QUEENS WAY",
14 "price": 450,000,
15 "image": "wix:image://v1/79e4b0_2ee8539d456c5c0fb48502g9fge1dbe4.jpg/queens-way.jpg",
16 "url": "https://users.wixsite.com/best-real-estate-site/listings/queens-way"
17 },
18 ...
19]Step 2: Set the Repeater's Data
1 $w('#myRepeater').data = results.items;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 keys 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$w("#myRepeater").onItemReady(($item, itemData, index) => {
2 $item("#myTitleText").text = itemData.title;
3 $item("#myPriceText").text = itemData.price;
4 $item("#myImage").src = itemData.image;
5 $item("#myButton").link = itemData.url;
6});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 wixData.query('MyCollection')
2 .lt('price', '500000')
3 .descending('title')
4 .find()
5 .then((results) => {
6 if (results.totalCount > 0) {
7 $w('#myRepeater').data = results.items;
8 }
9 });
10Complete Code
1import wixData from 'wix-data';
2
3$w.onReady(function () {
4 $w("#myRepeater").onItemReady(($item, itemData, index) => {
5 $item("#myTitleText").text = itemData.title;
6 $item("#myPriceText").text = itemData.price;
7 $item("#myImage").src = itemData.image;
8 $item("#myButton").link = itemData.url;
9 });
10
11 wixData.query("MyCollection")
12 .lt('price', '500000')
13 .descending('title')
14 .find()
15 .then((results) => {
16 if (results.totalCount > 0) {
17 $w("#myRepeater").data = results.items;
18 }
19 })
20 .catch((error) => {
21 console.error(error);
22 });
23});