Hello, I created a repeater that displays random items from my database. The items are randomly placed in the repeater every time the page is refreshed.
The code below (which I used on my page) works perfectly but my issue is that I am seeing ALL the items from the database when I only want to display 5 random items each time the page gets refreshed.
//randomised repeater
import wixData from ‘wix-data’ ;
$w . onReady ( async function () {
$w ( "#repeater5" ). onItemReady (( $item , itemData , index ) => {
$item ( '#text22' ). text = itemData . title ;
});
**let** results = **await** wixData . query ( "database1" ). find ();
**let** items = results . items ;
console . log ( items );
**let** shuffled = shuffleArray ( items );
console . log ( shuffled );
$w ( '#repeater5' ). data = shuffled ;
$w ( '#repeater5' ). expand ();
});
function shuffleArray ( array ) {
for ( let last = array . length - 1 ; last > 0 ; last --) {
const next = Math . floor ( Math . random () * ( last + 1 ));
[ array [ last ], array [ next ]] = [ array [ next ], array [ last ]];
}
return array ;
}
I tried to modify this line of code:
let results = await wixData . query ( “database1” ). find ();
With this:
let results = await wixData . query ( “database1” ).limit(5). find ();
The modified code actually displays only 5 items. The problem is that it only shuffles the first 5 items from my database and displays them in the repeater. What I end up having is just a repeater that shows the same 5 items but in random order. I think this is because .limit actually has to do with the query and has nothing to do with the repeater’s aspect…
I want to be able to have a repeater that has 5 slots and each time the page gets refreshed, it populates those 5 slots with random items from the database. Any help would be highly appreciated!
Thanks in advance.
Hi,
use the following function
function getxAmountOfArray(array,length){
let newArray
for (var i = 0; i < length; i++) {
if (i === 0){
newArray = array
} else {
newArray.push(array)
}
}
return newArray
}
And use it here
$w('#repeater5').data=getxAmountofArray(shuffled,5);
It will furst shuffle,
Then take 5 and add it to the repeater data.
kind regards,
kristof.
Hi there 
You must have all the items in hand in order to get random items as there’s no way to get random items from the DB.
const items = [{ _id : 'id1' }, { _id : 'id2' }, { _id : 'id3' }];
const total = items.length; // The total number of items;
const newItems = []; // An array to store the randomized items
const repNum = 5; // The number of items you want to show in the repeater
// A function to get a random item
const getRandom = () => {
return items[Math.floor(Math.random() * total)];
}
// A function to get unique items and store them;
const populateItems = () => {
while (newItems.length < repNum && newItems.length <= total) {
let item;
do {
item = getRandom();
} while (newItems.map(items => items._id).indexOf(item._id) > -1)
newItems.push(item)
}
$w('#repeater').items = newItems;
}
Call the populateItems( ) functions whenever you want to update the repeater with new items.
populateItems(); // This will update the repeater with 5 random items.
Hope this helps~!
Ahmad
Thanks for the answer. I still can’t figure out how to make it work though. Do I have to also keep the previous function?
I implemented your code in the old one but it still doesn’t work.
Here’s what I did:
//randomised repeater
import wixData from ‘wix-data’ ;
$w . onReady ( async function () {
$w ( "#repeater5" ). onItemReady (( $item , itemData , index ) => {
$item ( '#text22' ). text = itemData . title ;
});
**let** results = **await** wixData . query ( "database1" ). find ();
**let** items = results . items ;
console . log ( items );
**let** shuffled = shuffleArray ( items );
console . log ( shuffled );
$w ( '#repeater5' ). data = getxAmountOfArray ( shuffled , 5 );
$w ( '#repeater5' ). expand ();
});
function getxAmountOfArray ( array , length ){
let newArray
for ( var i = 0 ; i < length ; i ++) {
if ( i === 0 ){
newArray = array
} else {
newArray . push ( array )
}
}
return newArray
}
function shuffleArray ( array ) {
for ( let last = array . length - 1 ; last > 0 ; last --) {
const next = Math . floor ( Math . random () * ( last + 1 ));
[ array [ last ], array [ next ]] = [ array [ next ], array [ last ]];
}
return array ;
}
Any additional help would be highly appreciated. Thanks for your time!
Hi! Your code works really well for me…once. When I click a button, I call the populateItems() and it randomly picks an item (I want it to pick one at a time, repNum = 1). But the second time I click the button, nothing happens. What am I missing?