Is there a better way to code this repeater randomizer?

Ask the community
, ,
1

Kia ora all!

I’m looking to create a repeater that loads it’s elements in a random order every time you reload the page in Wix Studio.

The only problem right now is the page loads in the elements first before randomizing.

So for a brief second you see none randomized elements, and then they disappear and the randomly organized elements load in to replace them. It only a small thing, but it looks kind of glitchy and bad.

Is there a better way of coding this?

I have a limited knowledge of coding, and would apricate any help I can get.

import wixData from 'wix-data';

$w.onReady(() => {
    wixData.query("Team")
        .find()
        .then(results => {
            if (results.items.length > 0) {
                const shuffledListings = shuffleArray(results.items);
                $w("#repeater1").data = shuffledListings;
            } else {
                console.warn("No items found in the Services collection.");
            }
        })
        .catch(error => console.error("Error fetching data:", error));
});

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

Kind regards,
Jak

2

Hi, @Jak_Charles !!

If the shuffle is working correctly, you could initially hide the repeater and then display it when the shuffled data has finished loading. :slightly_smiling_face:

Please set #repeater1 to be hidden in the editor. :wink:

import wixData from "wix-data";

$w.onReady(() => {
    
  $w("#repeater1").onItemReady(() => {
    if (!$w("#repeater1").isVisible) $w("#repeater1").show();
  });

  wixData
    .query("Team")
    .find()
    .then((results) => {
      if (results.items.length > 0) {
        const shuffledListings = shuffleArray(results.items);
        $w("#repeater1").data = shuffledListings;
      } else {
        console.warn("No items found in the Services collection.");
      }
    })
    .catch((error) => console.error("Error fetching data:", error));

});

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}
3

Screenshot 2025-03-03 113001

Is this what you mean by ‘hidden in the editor’? As I’ve tried it this way, but the repeater doesn’t appear again when hidden like this, which leads me to thinking I’m doing it wrong.

4

Got it. Please rewrite it in either of the following ways. :open_mouth:

  $w("#repeater1").onItemReady(() => {
    if ($w("#repeater1").hidden) $w("#repeater1").show();
  });

OR

  $w("#repeater1").onItemReady(() => {
    $w("#repeater1").show();
  });
5

Thank you so much onemoretime! After some noodling around your advice has helped me get there, and here is the code for anyone that would like to do the same thing.

import wixData from "wix-data";

$w.onReady(() => {
  // Initially hide the repeater
  $w("#repeater1").hide();

  // Fetch data from the "Team" collection
  wixData.query("Team")
    .find()
    .then((results) => {
      if (results.items.length > 0) {
        // Shuffle the retrieved items
        const shuffledItems = shuffleArray(results.items);
        
        // Assign the shuffled data to the repeater
        $w("#repeater1").data = shuffledItems;
        
        // Show the repeater after assigning data
        $w("#repeater1").show();
      } else {
        console.warn("No items found in the 'Team' collection.");
      }
    })
    .catch((error) => console.error("Error fetching data:", error));
});

// Function to shuffle an array using the Fisher-Yates algorithm
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}
1 Like
6

I understand. My intention was to show the element after the data is entered, but I believe the code you provided should still work well to achieve the goal. If that’s fine with you, then it should be okay. However, it might be more reliable to hide #repeater1 through the editor’s property settings rather than through code. :wink:

1 Like