Randomize data for Repeater

Ask the community
,
1

Hi All,

Was hoping someone could help me out with a piece of code that works on one page but doesn’t work on the other.

I have a repeater on a search page (below) that randomizes data from my dataset. It works fine. However, I’m also trying to do this on my homepage (second image) but I can’t get it to randomize and for the life of me can’t figure out why. Thank you very much for the help!

search page, randomized repeater works

import wixLocation from 'wix-location';
import { local } from 'wix-storage';
import wixData from 'wix-data';

$w.onReady(function () {
 var sameWord = local.getItem("searchWord");
    $w("#searchBar").value = sameWord;
    $w("#searchBar").placeholder = sameWord;
    $w('#menuSearch').onReady(function () {
        search();

//repeater with randomized data, works fine. 
let data = $w("#repeater2").data;
data = shuffle(data);
$w("#repeater2").data = data;
});
});

export function shuffle(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;
}

export function searchButton_click() {
    search();
}

export function searchBar_keyPress(event) {
 if (event.key === "Enter") {
        searchButton_click();  
    } else {
 //
    }
}

function search() {
    wixData.query('Items')
    .contains('rName', $w("#searchBar").value)
    .or(wixData.query('Items').contains('description', $w("#searchBar").value))
    .find()
    .then(res => {
        $w('#repeater1').data = res.items;
    });
}

Home page, same code, doesn’t work.

import wixUsers from 'wix-users';
import { local } from 'wix-storage';
import wixLocation from 'wix-location';
import wixData from 'wix-data';

$w.onReady(function () {
 if (wixUsers.currentUser.loggedIn) {
        $w("#menuButtonLoggedIn").show();
        $w("#signUpNowText").hide();
    } else {
        $w("#menuButtonLoggedIn").hide();
        $w("#signUpNowText").show();
    }
    
 //  ** 
    
 //can't get this to work
 let data = $w("#repeater1").data;
    data = shuffle(data);
    $w("#repeater1").data = data;
});

export function shuffle(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;
}

//**

export function searchButton_click(event) {
 let word = $w("#searchBar").value;
    local.setItem("searchWord", word);
    wixLocation.to('/search-results')
}

export function searchBar_keyPress(event) {
 if (event.key === "Enter") {
        searchButton_click();
    } else {
 //
    }
}
2

It looks like you have a dateset on your page.
So you should add the line in red :

//your code.....
$w("#dataset1").onReady(() => {
    let data = $w("#repeater1").data;
    data = shuffle(data);
    $w("#repeater1").data = data;
})
//your code.....
3

You’re awesome JD! This fixed the problem.

However… upon fixing it, I realized the entire code is flawed. This is randomizing the repeater, not the data into the repeater. I.e. it only pulls the top 4 of the database, but then randomizes those.

So… since you’re awesome and whatnot, would you have an answer for this? I’m assuming its a lot more complicated and will involve skip counts and math.floor and etc. Unless you have an elegant solution?

Thank you for your help JD!

4

@jbarbourmba in order to make it work well, you’ll have disconnect the repeater from the dataset on the editor, and set everything by code.
But how exactly to do depends on how many items you have (total number).
Because you probably want the performance to be as fast as possible.
For example, if you have 20 items, the easiest way will be to bring them all to the front end and make the randomizing there, but if you want to choose 4 items out of 5 million items you’d like to make the randomizing on the backend and only bring 4 of them to the front-end.

5

@jonatandor35 I really appreciate you taking the time to help with this. That, however, might be above my skill level. I’d probably want to bring them to the front end and randomize. Would I do this with a .columns like below and then link it to the repeater?

Would it be something like this? Or am I not even close?

$w.onReady(function () {  $w("#repeater1").columns = [{ 
"id": "col1", 
"dataPath": "title", 
"label": "Recipe", 
"type": "string",  
},
6

@jbarbourmba No, it’s not close. But I posted an answer for a similar question yesterday (or a few days ago). Have a look at the recent pages and take the code from there.