Unclear why Selection Tags Aren't Working

Ask the community
,
1

I’ll preface this by saying I know absolutely nothing about Javascript, so please excuse any blatant ignorance.

I’ve added code to my page that pairs selection tags and a repeater to a dataset. The goal is to have viewers click a tag so that the content in the repeater is filtered. Wix shows no errors in my code, yet there are a few issues in the preview:

  1. Most importantly, clicking a tag causes everything to disappear from the repeater. The values on the tags is set correctly (as far as I can tell), and the tags appear on the buttons within the repeater that I set to display them.

  2. The selection tags are set to have ‘all’ selected by default, yet when I preview the page, the selected tag is the tag associated with the newest item in the dataset. As above, if you deselect and select the tag again, the repeater appears empty.

  3. For some reason, the button that is meant to display the tagged value (in this case, they are film genres) bugs out, and instead shows the value of whichever selection tag you quit. For instance, if it’s meant to show Romance, but you deselect all tags, it goes blank. Select and deselect Young Adult, and it will have changed to Young Adult. This doesn’t happen if I set the button to present another value, such as the film’s title, but it doesn’t resolve the primary issue.

Initially, I thought the issue may be that I’m asking for data from the repeater rather than directly from the dataset, but if I point to the dataset instead of the repeater, I get an error (.data doesn’t exist on #dataset1, for instance).

Code is below. For reference, I’m still using the default item names (#repeater1, for instance) until I can get this working.

Thanks for any input.

import wixData from 'wix-data';

const collectionName = 'OurWork';
const fieldToFilterByInCollection = 'Strand';

$w.onReady(function () {

    setRepeatedItemsInRepeater()
    loadDataToRepeater()

    $w('#selectionTags1').onChange((event) => {
 const selectedTags = $w('#selectionTags1').value
        loadDataToRepeater(selectedTags)
    })
});

function loadDataToRepeater(selectedCategories = []) {

 let dataQuery = wixData.query(collectionName)

 if (selectedCategories.length > 0) {
        dataQuery = dataQuery.hasAll(fieldToFilterByInCollection, selectedCategories)
    }
 
    dataQuery
        .find()
        .then(results => {
 const itemsReadyForRepeater = results.items
            $w('#repeater1').data = itemsReadyForRepeater;

 const isRepeaterEmpty = itemsReadyForRepeater.length === 0

 if (isRepeaterEmpty) {
                $w('#noResultsFound').show()
            } else {
                $w('#noResultsFound').hide()
            }
        })
}

function setRepeatedItemsInRepeater() {
    $w('#repeater1').onItemReady(($item, itemData) => {

        $item('#image10').src = itemData.image10;
        $item('#text26').tooltip = itemData.text26;
        $item('#text26').text = itemData.text26
        $item('#text27').text = itemData.text27;

    })
}
2

Update: I worked out the first issue. I was using the field name, not the field key to filter.

Still seeing issues two and three though. Not sure what is causing the most recent tag in the strand field to be selected in the selection tags rather than the button I chose to be selected by default. If anyone has a clue, please let me know.