> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Display Database Collection Content in a Repeater
## Article: Display Database Collection Content in a Repeater
## Article Link: https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/displaying-data/display-database-collection-content-in-a-repeater.md
## Article Content:
# 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](https://support.wix.com/en/article/displaying-collection-content-in-a-repeater) without any code using a dataset, but using code provides you with additional functionality and options.
## Overview
[Database collections](https://support.wix.com/en/article/creating-a-content-collection) 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](https://support.wix.com/en/article/wix-editor-adding-and-managing-repeaters-lists-grids). 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 [Code sidebar](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-editor-working-with-the-code-sidebar.md) (Wix Editor) or [Code panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (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`](https://www.wix.com/velo/reference/wix-data) module, which contains the data [`query()`](https://www.wix.com/corvid/reference/wix-data/query) function. The `wix-data` APIs contain functionality for working with your database collections with code.
```javascript
import wixData from 'wix-data';
```
We run the query on our `MyCollection` database collection:
```javascript
wixData.query('MyCollection')
.find()
.then((results) => {
if (results.totalCount > 0) {
console.log("Query results:", results.items);
}
})
.catch((error) => {
console.error(error);
});
```
### 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](https://support.wix.com/en/article/velo-working-with-promises) resolves.
* **Lines 4-5:** If there are results, print the result items to the [console](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md) to view them.
* **Lines 8-9:** If there's an error, print the error to the console.
The query result [`items`](https://www.wix.com/velo/reference/wix-data/wixdataqueryresult/items) are an array of objects representing each item in your database collection. For example, if you have database collection fields with [field IDs](https://support.wix.com/en/article/cms-formerly-content-manager-about-your-collection-fields#field-id-velo-by-wix-only) 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`.
```json
[
{
"_id": "1234",
"_createdDate": "2021-05-29T08:35:52.344Z",
"title": "DOWN AVENUE",
"price": 500,000,
"image": "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/down-avenue.jpg",
"url": "https://users.wixsite.com/best-real-estate-site/listings/down-avenue"
},
{
"_id": "5678",
"_createdDate": "2021-05-25T12:48:56.572Z",
"title": "QUEENS WAY",
"price": 450,000,
"image": "wix:image://v1/79e4b0_2ee8539d456c5c0fb48502g9fge1dbe4.jpg/queens-way.jpg",
"url": "https://users.wixsite.com/best-real-estate-site/listings/queens-way"
},
...
]
```
## Step 2: Set the Repeater's Data
Setting a repeater's [data](https://www.wix.com/velo/reference/$w/repeater/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.
```javascript
$w('#myRepeater').data = results.items;
```
Setting a repeater's data also triggers the repeater's [onItemReady()](https://www.wix.com/corvid/reference/$w/repeater/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()`](https://www.wix.com/velo/reference/$w/repeater/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](https://support.wix.com/en/article/cms-formerly-content-manager-about-your-collection-fields#field-id-velo-by-wix-only) from the `MyCollection` database collection.
[`$item`](https://www.wix.com/velo/reference/$w/repeater/introduction#$w_repeater_introduction_repeated-item-scope) 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.
```javascript
$w("#myRepeater").onItemReady(($item, itemData, index) => {
$item("#myTitleText").text = itemData.title;
$item("#myPriceText").text = itemData.price;
$item("#myImage").src = itemData.image;
$item("#myButton").link = itemData.url;
});
```
>**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`](https://www.wix.com/velo/reference/wix-data/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()`](https://www.wix.com/velo/reference/wix-data/wixdataquery/lt) filter and a [`descending()`](https://www.wix.com/velo/reference/wix-data/wixdataquery/descending) sort to the query, before executing the query with the `find()` function:
```javascript
wixData.query('MyCollection')
.lt('price', '500000')
.descending('title')
.find()
.then((results) => {
if (results.totalCount > 0) {
$w('#myRepeater').data = results.items;
}
});
```
## Complete Code
Here is the complete code for the example:
```javascript
import wixData from 'wix-data';
$w.onReady(function () {
$w("#myRepeater").onItemReady(($item, itemData, index) => {
$item("#myTitleText").text = itemData.title;
$item("#myPriceText").text = itemData.price;
$item("#myImage").src = itemData.image;
$item("#myButton").link = itemData.url;
});
wixData.query("MyCollection")
.lt('price', '500000')
.descending('title')
.find()
.then((results) => {
if (results.totalCount > 0) {
$w("#myRepeater").data = results.items;
}
})
.catch((error) => {
console.error(error);
});
});
```
## Learn More
* [Working with database collections and code](https://support.wix.com/en/article/velo-overview-of-the-wix-data-and-wix-dataset-apis)
* [Wix Data APIs](https://www.wix.com/velo/reference/)