Show data from the database in repeater on Wix site.

Before we begin, you need to know How to create the database first.

Here, we'll learn:

1. How to create the repeater

2. How to connect repeater to the database

3. How to add simple filters to the dataset(without the code)

4. BONUS: How to create a simple text filter.

Lets begin...

• Add the repeater item to the page. It can be found in the “Lists & Grids” section.

• Add the dataset and choose the database to use. We will choose the ‘Workers’ database.

• Now we will connect the repeater to the dataset so it could know which data to show. Click on the dataset icon and choose the dataset you added

  • Besides that you also need to connect Components of the repeater to your dataset

• Connect every item of your repeater. I put the corresponding text as a placeholder to make it more clear in the editor. The good solution would be to add the data from one real item, cause when site will be loading WIX will first show the item you have in the editor(what you see when edit the repeater) and after that load the data from the database and show items you need. When user has a good internet it won’t be visible, but when it’s not so good, user will see your placeholders for a moment.

Dataset settings.

• You can add some filters on load.

• You can also sort items on load and choose the number of items shown on load.

• The next step would be to set filter on dataset when event happens.

The code we use will look like:

import wixData from 'wix-data';

$w.onReady(function () {

});
export function input1_change(event) {  

    $w("#dataset1").setFilter( wixData.filter()  
    .contains("lastName", $w('#input1').value)  
    )
 }

input1_change — is a function that will work when trigger action happens (like field is changed in our case). $w(“#dataset1”) — contains the id of dataset you have to filter

.contains — is a way of how we compare the value in the input field and the database.

“lastName” — is an Field Key that we are using to compare with use input

$w(‘#input1’) — contains the id of input field where user add the text to compare