Wix Velo Populate a Repeater with Static Data

Learn how to populate repeater data from static data like an object in Wix Velo. You can populate repeater items with different methods like retrieving data from a third party with Wix Fetch, by connecting it to the dataset or a data query. This method only works if you need something statically to show on the page.

Since we do not connect data to the repeater from a dataset, we do not add a dataset to the page as a content manager element nor import "wix-data" module from the backend.

How to Populate a Repeater with Static Data?

You might find that populating a repeater from dynamic data is a bit challenging but for simple usage, you can prefer using static data.

Wix Velo Populate a Repeater with Static Data

Page Elements

Each page element is selected in code with $w selector whereas the ones in the repeater with $item.

$w('#helloRepeater')
$item('#languageText')
$item('#helloText')
$item('#indexText')
$item('#itemContainer')

Mouse Hover Events

This is the optional part for adding interaction to your repeater item. It is up to your selection so you can either make $item('#languageText') visible on the page load or let it be shown as a result of hover interaction.

$item('#itemContainer').onMouseIn(() => {
            $item('#languageText').show();
        });

$item('#itemContainer').onMouseOut(() => {
            $item('#languageText').hide();
        })

How to Write Static Data in Wix Velo?

Creating static data in Wix Velo is as simple as writing it in JavaScript. You can create static data with an array of objects including the following "keys":

• _id for item ID,

• language for item language value,

• greeting for item value in that language,

You can add as many properties as you want to your array.

// Static array of objects, each containing a unique `_id` value
const staticData = [
  {_id: '1', language: 'English', greeting: 'Hello World!'},
  {_id: '2', language: 'French', greeting: 'Bonjour monde!'},
  {_id: '3', language: 'Japanese', greeting: 'こんにちは世界！'},
  {_id: '4', language: 'Portuguese', greeting: 'Olá Mundo!'},
  {_id: '5', language: 'Spanish', greeting: '¡Hola Mundo!'},
  {_id: '6', language: 'Ukrainian', greeting: 'Привіт Світ!'}
];
  

How to Populate Repeater in Wix Velo with Static Data?

In order to populate data on the repeater:

1. Set the repeater item on the page by calling onItemReady() function. This function will run once the page is ready (onReady()),

2. Sync each item on the repeater (with $item selector) to a field on your static data,

3. Set the repeater's data property $w('#helloRepeater').data as staticData which is the static data we created.

$w.onReady(async function () {
    // Define how to set up each new repeater item
    $w('#helloRepeater').onItemReady(($item, itemData, index) => {
        $item('#languageText').text = itemData.language;
        $item('#helloText').text = itemData.greeting
        $item('#indexText').text = (index + 1).toString();

        $item('#itemContainer').onMouseIn(() => {
            $item('#languageText').show();
        });

        $item('#itemContainer').onMouseOut(() => {
            $item('#languageText').hide();
        })
    } );

    console.log(staticData);

    // Set the data to associate with the repeater
    $w('#helloRepeater').data = staticData;
});
    

This is the complete code of this example.

// Static array of objects, each containing a unique `_id` value
const staticData = [
  {_id: '1', language: 'English', greeting: 'Hello World!'},
  {_id: '2', language: 'French', greeting: 'Bonjour monde!'},
  {_id: '3', language: 'Japanese', greeting: 'こんにちは世界！'},
  {_id: '4', language: 'Portuguese', greeting: 'Olá Mundo!'},
  {_id: '5', language: 'Spanish', greeting: '¡Hola Mundo!'},
  {_id: '6', language: 'Ukrainian', greeting: 'Привіт Світ!'}
];

$w.onReady(async function () {
    // Define how to set up each new repeater item
    $w('#helloRepeater').onItemReady(($item, itemData, index) => {
        $item('#languageText').text = itemData.language;
        $item('#helloText').text = itemData.greeting
        $item('#indexText').text = (index + 1).toString();

        $item('#itemContainer').onMouseIn(() => {
            $item('#languageText').show();
        });

        $item('#itemContainer').onMouseOut(() => {
            $item('#languageText').hide();
        })
    } );

    console.log(staticData);

    // Set the data to associate with the repeater
    $w('#helloRepeater').data = staticData;
});

This example was originally created by Velo Team and published on the Velo Examples page. It was just only presented for educational purposes by us.