Can we Randomize Database Info In a Repeating Layout?

Discussion Ask a question
,
1

Hello,

I have created a Database and Dataset and linked this to a repeating layout which is placed on the home page.

I would like to know if there is any way to set the repeating layout items to randomize on page load.

I have put together a screen video for you to hopefully explain:
https://cl.ly/2I1y1P160X3b

I am not a programmer, so not sure how to do this myself or if it is even possible. I’d love to find out.

Thanks,
Natalie

2

Hey Natalie,
In order to randomize the DB info , you would need a bit coding:

import wixData from 'wix-data';

$w.onReady(function () {
	//get the collection records
	wixData.query("collectionName")
		.find()
		.then((result) => {
			const shuffledArray = shuffleArray(result.items);
			//add the shuffled array data to then repeaters
			$w('#repeater1').data = shuffledArray;			
		})
		.catch((err) => {
			let errorMsg = err;
		});
});

//random array index
function getRandomIndex(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

//shuffle array data
function shuffleArray(dataArray){

	for(let i = dataArray.length - 1; i > 0; i--){
		let index = getRandomIndex(0, i);
		const temp = dataArray[i];
		dataArray[i] = dataArray[index];
		dataArray[index] = temp;
	}
	
	return dataArray;
}

Have a good day,
Tal.

1 Like
3

Hi Tal,

Thanks kindly for this code.

I have not worked with Code in Wix and really don’t do any JS stuff (I do more design and use CSS/XHTML), not so much other coding. Is there a good resource for me to learn how to implement the code you gave me into the Repeater I’d like to use in on?
I’ve found this article:
https://www.wix.com/code/home/video-custom-interactions

I’ve given my repeater an ID, but am not sure where to put this JS.

Is it in the OnItemReady area? And do I place the code under the area:
//TODO: write your page related code here…

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

$w.onReady(function () {
	//TODO: write your page related code here...

});

export function clubsrepeater_itemReady($w, itemData, index) {
	//Add your code for this event here: 
}

See attached screenshot.

1920×1187 355 KB

Thanks,
Natalie

4

Hi,

Your repeater ID should replace the one on the following line:

$w('#repeater1').data = shuffledArray;

The code should be as Tal wrote:
Some functions declared on global scope, and query of database inside $w.onReady().

Don’t forget to change the database collection name in the following line:

wixData.query("collectionName")

Liran.

5

Thank you!

6

Hi,

I am also trying to do the same as above randomize Database Info In a Repeating Layout. I copied the code that Tal posted but I am still having some issues. Please see the image below. I have also attached the code I have after it in case its conflicting with it. This is the URL. https://www.easternstyles.com/artificial-floral-garden

1301×466 14.8 KB

1299×745 26.7 KB

7

Hi Tal, I’ve tried the code you kindly provided and in general it does work. The problem I am having is that I need to filter the records and that code doesn’t account for that and I get all the records instead. Is there some other code I can add to filter the records? Thanks