> 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: Tutorial | Display Database Collection Content in a Repeater

## Article: Tutorial | Display Database Collection Content in a Repeater

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/data/tutorial-display-database-collection-content-in-a-repeater.md

## Article Content:

# 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](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.

> 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](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-in-the-editor.md) or [using the CLI](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-with-the-cli.md).

## About database collections and repeaters

[Database collections](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/work-with-data/introduction/about-collections.md) 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](https://support.wix.com/en/article/wix-editor-adding-and-managing-repeaters-lists-grids) 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:

1.  Query the database collection to retrieve your data.
2.  Bind the data to your repeater component.
3.  Map collection fields to specific repeater elements.

The result should look like this:

![Repeater displaying collection content](https://wixmp-833713b177cebf373f611808.wixmp.com/images/34976e758c70d518dbfcb4f948e0f410.png)

## Step 1 | Add a repeater on your site

Add a [repeater](https://support.wix.com/en/article/studio-editor-adding-and-customizing-repeaters) 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.

::::tabs
:::Editor
1. Navigate to **Page Code** in the Code sidebar.
1. Select your page.

A page code file opens. The file includes a sample `onReady()` function.
:::
:::Wix-IDE-or-Local-IDE
Open the file in the `Pages` folder. The file includes a sample `onReady()` function.
:::
::::

## 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:

::::tabs
:::Wix-Studio
1. Click on the **CMS** tab in the Code panel.
1. Hover over your collection, click the **Show More** icon, and select **Edit settings**.
1. Copy the collection ID to use in your code.
:::
:::Wix-Editor
1. Click on the **Databases** tab in the Code sidebar.
1. Hover over your collection, click the **Show More** icon, and select **Edit settings**.
1. Copy the collection ID to use in your code.
:::
::::

Now that you have the collection ID, you can query your data:

1. Import the [`@wix/data`](https://dev.wix.com/docs/sdk/backend-modules/data/items/introduction.md) module, which provides the [`query()`](https://dev.wix.com/docs/sdk/backend-modules/data/items/query.md) method for retrieving collection data.

```javascript
import { items } from "@wix/data";
```

> Learn more about using [npm packages](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/about-npm-packages.md) when developing sites.

2. Run the query using the ID you retrieved above:

```javascript
const { items: collectionData } = await items.query("MyCollection").find();
```

The query returns an array of [`items`](https://dev.wix.com/docs/sdk/backend-modules/data/items/query.md), where each item represents a record from your collection. Collection [field IDs](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/work-with-data/introduction/about-collection-fields.md#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.

```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 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](https://www.wix.com/velo/reference/$w/repeater/data) property to your collection results:

```javascript
$w("#myRepeater").data = collectionData;
```

> **Note:** This automatically triggers the repeater's [onItemReady()](https://www.wix.com/velo/reference/$w/repeater/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()`](https://www.wix.com/velo/reference/$w/repeater/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`](https://www.wix.com/velo/reference/$w/repeater/introduction#$w_repeater_introduction_repeated-item-scope) selector, which selects specific instances of repeated elements.

In this example, `title`, `price`, `image`, and `url` are [field IDs](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/work-with-data/introduction/about-collection-fields.md#field-ids) from the `MyCollection` database collection:

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

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:

```javascript

import { items } from "@wix/data";

$w.onReady(async method () {
  const { items: collectionData } = await items.query("MyCollection").find();
  $w("#myRepeater").data = collectionData;
  $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;
  });
});
```

## See also

- [$item](https://www.wix.com/velo/reference/$w/repeater/introduction#$w_repeater_introduction_repeated-item-scope)
- [Wix JavaScript SDK](https://dev.wix.com/docs/sdk/articles/get-started/about-the-wix-java-script-sdk.md)