Change the sort of repeater in code (not using dataset)

Ask the community
,
1

Can someone please help me sort the repeater data to show in low - high order from a column in the respective table? I’ve created a ‘Order’ column and then numbered them in the order I wanted them in start from 1.

import { getMenus } from ‘backend/data.jsw’ ;
// ID: 5119D613F3A02481B7F825C8A883DE93

let menusData , repeaters ;

let selectionState = {
currMain : null ,
currSub : null ,
};

const colors = {
mainUnselected : ‘#3C6273’ ,
subUnselected : ‘#3C6273’ ,
selected : ‘#097633’
}

$w . onReady ( async function () {
await iniPage ();
});

async function iniPage ( ) {
try {
const menus = await getMenus ();
repeaters = menus . menusNames . map ( id => ({ menuId : id , repeaterSelector : $w ( ‘#’ + id + ‘Repeater’ ) }));
menusData = menus . menusData ;
$w ( ‘#mainMenuRepeater’ ). data = menusData . mainMenu ;
connectDataToRepeatersItems ();
selectMenu ( ‘mainMenu’ );
} catch ( err ) {
console . error ( 'error ’ , err );
}
}

function connectDataToRepeatersItems ( ) {

repeaters . forEach (({  menuId ,  repeaterSelector  }) => { 
    repeaterSelector . onItemReady (( $item ,  itemData ) => { 
        **const**  $itemBtn  =  $item ( '#'  +  menuId  +  'Button' ); 
        
        **if**  ( itemData . name )  $itemBtn . label  =  itemData . name ; 
        **if**  ( itemData . image )  $item ( '#'  +  menuId  +  'Image' ). src  =  itemData . image ; 
        **if**  ( itemData . link )  $itemBtn . link  =  itemData . link ; 
        **else**  $itemBtn . onClick (() => { 
            resetColorForPrevSelection ( menuId ); 
            **if**  ( menuId  ===  'mainMenu' ) { 
                selectionState . currMain  =  $itemBtn ; 
                selectionState . currSub  =  **null** ; 
            }  **else**  { 
                selectionState . currSub  =  $itemBtn ; 
            } 
            $itemBtn . style . color  =  colors . selected ; 
            selectMenu ( menuId ,  itemData . _id ) 
        }); 
    }); 
});

}

function resetColorForPrevSelection ( menuId ) {
if ( menuId === ‘mainMenu’ && selectionState . currMain ) {
selectionState . currMain . style . color = colors . mainUnselected ;
} else if ( selectionState . currSub ) {
selectionState . currSub . style . color = colors . subUnselected ;
}
}

function selectMenu ( menu , clickedElementId ) {
let nestedMenus ;
if ( menu === ‘mainMenu’ ) {
nestedMenus = [ ‘subMenu’ ];
$w ( ‘#megaMenuStrip’ ). collapse ();
} else if ( menu === ‘subMenu’ ) {
nestedMenus = [ ‘rangeMenu’ ];
$w ( ‘#megaMenuStrip’ ). expand ();
}
nestedMenus . forEach ( nestedMenu => {
$w ( ‘#’ + nestedMenu + ‘Repeater’ ). data = filterRepeaterData ( menu , nestedMenu , clickedElementId );
});
}

function filterRepeaterData ( clickedMenu , nestedMenu , elementId ) {
return menusData [ nestedMenu ]. filter ( item => item [ clickedMenu ] === elementId );
}

$w ( “#rangeMenuButton” ). target = “_self” ;

2

You can use setSort() on your dataset to set an order:

https://www.wix.com/velo/reference/wix-dataset/dataset/setsort

3

do you find the solution?