Filtering a repeater based on a dropdown selection in Wix (Velo + CMS) is not working

Ask the community
, , , ,
1

I’m having trouble with
Filtering a repeater based on a dropdown selection in Wix (Velo + CMS).

Working in
Wix Editor with Dev Mode (Velo) enabled. Using CMS datasets.

Site link

What I’m trying to do
I have:

  • A CMS collection Spelare1 with player names (title_fld)

  • A CMS collection Statistik with player statistics. This has a reference field Spelare linking to Spelare1.

  • A dropdown (#spelareDropdown) populated with players from Spelare1

  • A repeater connected to dataset #dataset2 (Statistik)

My goal:
:backhand_index_pointing_right: When I select a player from the dropdown, the repeater should only show that player’s statistics.

What I’ve tried so far
Here’s my code:

import wixData from ‘wix-data’;

$w.onReady(function () {
// Populate dropdown with players
wixData.query(“Spelare1”)
.ascending(“title_fld”)
.find()
.then((results) => {
if (results.items.length > 0) {
const options = results.items.map(item => {
return { label: item.title_fld, value: item._id };
});
$w(“#spelareDropdown”).options = options;
}
})
.catch((err) => {
console.error("Error fetching players: ", err);
});

// Filter statistics when player is selected
$w('#spelareDropdown').onChange((event) => {
    const selectedPlayerId = $w('#spelareDropdown').value;
    $w('#dataset2').setFilter(
        wixData.filter().eq("Spelare", selectedPlayerId)
    );
});

});

The problem

  • Initially, the repeater shows all 16 players.

  • When I select a player from the dropdown → the repeater becomes empty instead of showing only that player’s statistics.

Extra context

  • The field Spelare in Statistik is a reference field to Spelare1.

  • Dropdown works fine, it loads all players correctly. The filtering is the part that’s not working.

2

Try to inspect your own CODE and you will be capable to resolve your issue on your own.

Use the CONSOLE of your Webbrowser –> PRESS –> F12 and navigate to –> CONSOLE

Check your LOGs, especially for

–> console.log(RESULTS: ‘, results’);

–> console.log('Selected-Player-ID: ', selectedPlayerId);

$w.onReady(()=>{console.log('...page is ready...');
  $w.('#dataset2').onReady(()=>{console.log('...dataset1 is ready...');
    wixData.query(“Spelare1”)
    .ascending(“title_fld”)
    .find()
    .then((results) => {console.log(RESULTS: ', results');
      if (results.items.length > 0) {console.log(...some data has been found!!!);
        const options = results.items.map(item => {
          return { label: item.title_fld, value: item._id };
        }); $w(“#spelareDropdown”).options = options;
      } else {'...no data has been found!!!'}
    }).catch((err) => {console.error("Error fetching players: ", err);});

    $w('#spelareDropdown').onChange((event) => {
       const selectedPlayerId = $w('#spelareDropdown').value; 
       console.log('Selected-Player-ID: ', selectedPlayerId);
       $w('#dataset2').setFilter(wixData.filter().eq("Spelare", selectedPlayerId));
    });
  });
});