Randomizing my repeater

Ask the community
,
1

Hey guys,
Is there a quick way to show a randomized repeater every page load?
I thought about shuffling numbers (from 1 to the database’ length), inserting them to the database (like an index number) and that way I can just use the built-in Wix sorting (1,2,3,etc)…

Hopefully I explained myself properly.
Thank you in advance,
Liron

2

You could do something simple like this:

// clear any filters in the dataset connected to the repeater
$w("#dataset1").setFilter( wixData.filter() );

// get size of collection that is connected to the dataset
let count = $w("#dataset1").getTotalCount();

// get random number using the size as the maximum
let idx = Math.floor(Math.random() * count);

// set the current item index of the dataset
$w("#dataset1").setCurrentItemIndex(idx);

How many items do you want in your Repeater?

3

Another way:

  1. Get a random skip number.

  2. Query the database and get 3 random items.

  3. Create a repeater data object from our retrieved data.

  4. Set the repeater data property with our data object

  5. Add an .onItemReady() method to handle the repeated items.

import wixData from 'wix-data';

$w.onReady(function () {

 // 1) get a random skip number
 let max = numberRecipes - 3;
 let skip = Math.floor(Math.random() * max) + 1;

 // 2) query the database and get 3 random itmes
 wixData.query("collection")
  .ascending("title")
  .skip(skip)
  .limit(3)
  .find()
  .then( (results) => {
 let items = results.items;
 // 3) create a repeater data object from our retrieved data
 let itemData = [
      {
         "_id":items[0]._id,
         "text1":items[0].text
      },
      {
         "_id":items[1]._id,
         "text1":items[1].text
      },
      {
         "_id":items[2]._id,
         "text1":items[2].text
      }
    ];

 // 4) set the repeater data property with our data object
 $w("#repeater1").data = itemData; // add data to our repeater 
  } )
  .catch( (error) => {
 let errorMsg = error.message;
 let code = error.code;
  } );
 
 // 5) method to handle each repeated item
 $w("#repeater1").onItemReady( ($w, itemData, index) => {
 // all we do here is set the repeated image from our data
 const repeatedText = $w("#text1");
 repeatedText.text = itemData.text1;

 // you can do a whole lot more in this routine:
 // - handle other fields or elements
 // - add an onClick() handler
 // - handle selected repeat items
    });
});

This is a very simple example which just shows the basics. Refer to the documentation on $w.Repeater, be creative, and most important…

Have fun,

Yisrael

4

Hi Yisrael,
First of all, a big THANK YOU for your kind (x2) help!
Second, the first comment nor the second seem to work…
This is what Im trying to do: Page: [https://malachisrael.wixsite.com/testing2/blank-4](https://malachisrael.wixsite.com/testing2/blank-4) Obviously, it has a lot of 'cards'. Lets say I`m trying to shuffle them every time the page loads…
Am I missing something?
Thanks in advance,
Liron

5

Hey Liron,

I didn’t understand that you were trying to shuffle the results - I thought you were just trying to randomize what would be displayed.

To shuffle, you will need to disconnect the Repeater from the dataset, and add some code which will query the collection and shuffle the returned array of items.

Here is a very simple example of a “shuffled repeater”:

6

@yisrael-wix Is it possible to set maximum display items?
I mean for the “shuffled repeater” example you wrote

Thanks!

7

Hi Yisrael, I’m trying to randomly display items from my repeater on a page loading. I used the code above but it doesn’t refresh the repeater, any ideas what I am doing wrong?

export function dataset1_ready() {
$w("#dataset1").setFilter( wixData.filter() );
let count = $w("#dataset1").getTotalCount();

let idx = Math.floor(Math.random() * count);

$w("#dataset1").setCurrentItemIndex(idx);
}