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.

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.

To display database content in a repeater, we'll do the following:

1. Query (extract data from) the database collection.
2. Set the queried data as our repeater's data.
3. 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:

1. Select the Databases tab in the Velo sidebar (Wix Editor) or Code sidebar (Wix Studio). 

2. Hover over your collection, click the Show More icon and select Edit Settings.

3. 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 the MyCollection 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
[
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

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
$w('#myRepeater').data = results.items;

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
$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
});

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
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
  });

Complete Code

Here is the complete code for the example:

1
import 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
});

Learn More

• Working with database collections and code
• Wix Data APIs