Load more random entries in repeater

Ask the community
,
1

I am currently having two issues with a repeater on my website. My goal was to create a database of random facts, and have them displayed in a repeater one at a time, allowing people to click “next” to scroll to the next one. I looked at a bunch of different solutions for this on these forums and around the internet to randomize the dataset, and eventually found something that seemed to work for me by querying the database collection instead. However, I am currently having two issues:

First, while I am able to successfully randomize the first entry in my repeater like I want to do, I am not sure how to go about creating a “next” button that would then pull a random next entry. I can use a button connected to the repeater / dataset that loads the next item, but of course when I do this it is NOT in random order and goes in the same order every time. Thus, I can have a page load with a random first entry, but not random consecutive entries. (Check out www.randomfactgenerator.com; the first entry is random, but the second entry will always be the “ultracrepidarian” entry, and so on).

Second, random database query seems to be working in Chrome just fine, but I just tested it in Firefox and the repeater only displays “heading 1” instead of the content I want it to display. Any thoughts as to why Firefox doesn’t like my code?

Code is below. Any feedback on these two issues would be appreciated!

import wixData from 'wix-data';

$w.onReady(function () {
initiate();
});

function initiate() {
wixData.query('Trivia')
.limit(1000) //gets the maximum number of items allowed
.find() //if you have database permissions then run this query on the backend
.then( (results) => {
let array = results.items;
let random = shuffle(array); //shuffle data
$w("#repeater1").data = [random[0]]; //set repeater data
});
}
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}

export function repeater1_itemReady($item, itemData, index) {
$item("#name").text = itemData.name;
$item("#number").text = itemData.number;
$item("#website").text = itemData.website;
}
2

I would do something like this:

1520×1546 303 KB

import wixData from 'wix-data'

const randomNumber = (min, max) =>
  Math.floor(Math.random() * (max - min + min) + min)

export const getRandomTrivia = async () => {
  const { totalCount } = await wixData.query('Trivia').limit(1).find()
  const randomSkip = randomNumber(0, totalCount)
  const { items } = await wixData
    .query('Trivia')
    .limit(1)
    .skip(randomSkip)
    .find()
  return [items[0]]
}

$w.onReady(async () => {
  $w('#repeater1').data = await getRandomTrivia()

  // Add a button to retrieve more random trivia
  $w('#btnNextTrivia').onClick(
    async () => ($w('#repeater1').data = await getRandomTrivia())
  )
})

export function repeater1_itemReady($item, itemData, index) {
  $item('#name').text = itemData.name
  $item('#number').text = itemData.number
  $item('#website').text = itemData.website
}
3

Bruno, you are an absolute legend. This is perfect. Thank you for your time and thoughtful response here. I am very grateful!

4

:smiling_face_with_three_hearts: