How to display items in dynamic dataset in repeater based on attribute?

Ask the community
, , , ,
1

Question:
How can I display items from a dynamic dataset in a repeater based on if the item has the attribute

What are you trying to achieve:
I have a dynamic page and CMS collection for workout videos separated by the body area (e.g., ‘Core’, ‘Upper Body’).

I want to show only the videos that have the tag for the current page’s body area.

This is the full code that I used on a static page that worked, which showed the videos based on the attribute I explicitly named. (line 7)

$w.onReady(function () {
    // Pull dataset info
    const myRepeater = $w('#workoutVideosRepeater');

    myRepeater.onItemReady(($item, itemData, index) => {
        // Check if the item has the right tag
        const isVisible = itemData.workoutType.includes('AUB'); // accessory upper body

        // Set visibility for each item in the repeater
        if (isVisible) {
            $item('#container1').show(); // Show your specific element if it has the tag included above
			$item('#container1').expand();
        } else {
            $item('#container1').hide(); // Hide your specific element if it doesn't have the tag included above
			$item('#container1').collapse();
        }
    });

    $w('#workoutVideosDataset1').onReady(() => {
        // Get data from the dataset
        const datasetData = $w('#workoutVideosDataset1').getCurrentItem();

        // Set the data to associate with the repeater
        myRepeater.data = datasetData;
    });
});

Now, I’m trying to convert it to one Dynamic Page instead of making a separate page for each body area. But I can’t figure out how to pull the current dynamic page’s data and pull it through to the dataset.

What have you already tried:
I have already read the Wix API, looked through some similar topics. Here is my latest attempt:

$w.onReady(function () {
    // Assign repeater on page to a constant
    const myRepeater = $w('#workoutVideosRepeater');

    // Assign CMS data to a dataset that connects to the repeater
    $w('#workoutVideosDataset1').onReady(() => {
        // Get data from the dataset for item
        let datasetData = $w('#workoutVideosDataset1').getCurrentItem();
        const workoutTypeTitle = datasetData.workoutType1;
        console.log(workoutTypeTitle);

        // Set the data to associate with the repeater
        myRepeater.data = datasetData;

        // Function that goes through each item in dataset
        myRepeater.onItemReady(($item, itemData, index) => {
            // const workoutTypeTitle = itemData.workoutType1; // this gets each item's workoutType when we want the dynamic page's items workoutType

            // Check if the item has the right tag
            const isVisible = itemData.workoutType.includes(workoutTypeTitle);
            
             // Set visibility for the item
            if (isVisible) {
                $item('#container1').show(); // Show your specific element if it has the tag included above
                $item('#container1').expand();
            } else {
                $item('#container1').hide(); // Hide your specific element if it doesn't have the tag included above
                $item('#container1').collapse();
            }
        });
    });
});

This code just pulls the first two videos, regardless of the workoutType1 tag.

Additional information:

I know I’m clearly missing something that should be simple! Feel free to point me to the documentation that I need to look at to fix my issue.

2

Have you tried to just add a filter to the dataset

3

You are so close Amanda!

You are getting the current video workout type from the workout video dataset instead of the current workout type from the #dynamicDataset (whatever the name may be).

2 Likes
4

But instead of…

let datasetData = $w('#workoutVideosDataset1').getCurrentItem();

…we better define our variables the more logical way…

let currentItem = $w('#workoutVideosDataset1').getCurrentItem(); console.log(currentItem);

1 Like
5

Unfortunately, the filter cannot be used in dynamic datasets to sort by something within the dataset. Thank you, though!

6

You could tell me that is is CODE-QUEEN i was replying to, how dare i :rofl:

:tulip:

1 Like
7

It all depends on how it is set up to begin with.
If you have a main page with all videos the dataset can easily be filtered without code, using dropdowns/selection tags.
Or you can design one dynamic page…then duplicate this page and add filters to it. Then link to this page from a button/text.
done without code https://dcidesigns.wixstudio.io/dynamicfilter

8

Yes, but you are getting the wrong item from the wrong dataset.

Get the dynamic item variable and use it for your repeater dataset filter.

So …. dynamic page loads, get current item, get the body part for that current item, then use that variable inside of your video repeater that is connected to a completely different dataset to filter videos only with that body part.

I have a Wix Stores tutorial that has the logic you need. You should watch it to understand how to filter the repeater. In my video there is a main product. Then there is a database with extra information just for that product. The extra information is in a repeater.

Here is the link …… https://youtu.be/0KtB6xJ-fyM?feature=shared

1 Like
9

Oh, my earlier response wasn’t to you, it was about the person who suggested I just use the built-in Wix filters/sort.

Your comments have been so helpful, codequeen, thank you so much! With your logic and video I figured a solution out. I’m so happy and I truly appreciate the guidance rather than the easy fix of a code. :smiling_face_with_three_hearts:

My updated code:

$w.onReady(function () {
    // Assign repeater on page to a constant
    const myRepeater = $w('#workoutVideosRepeater');

    $w('#dynamicDataset').onReady(() => {
        // get current item from dynamic dataset to assign body part for this page
        let currentPage = $w('#dynamicDataset').getCurrentItem();
        const bodyPartPage = currentPage.workoutType1;

        // Assign CMS data to a dataset that connects to the repeater
        $w('#workoutVideosDataset1').onReady(() => {
            // Get data from the dataset for item
            let currentItem = $w('#workoutVideosDataset1').getCurrentItem();
            // Set the data to associate with the repeater
            myRepeater.data = currentItem;

            // Function that goes through each item in dataset
            myRepeater.onItemReady(($item, itemData, index) => {
                // Check if the item has the right tag
                const isVisible = itemData.workoutType1.includes(bodyPartPage);
                console.log(isVisible);
                // Set visibility for the item
                if (isVisible) {
                    $item('#container1').show(); // Show your specific element if it has the tag included above
                    $item('#container1').expand();
                } else {
                    $item('#container1').hide(); // Hide your specific element if it doesn't have the tag included above
                    $item('#container1').collapse();
                }
            });
        });
                
    });

});
2 Likes
10

I’m happy you figured it out!!!

Well I love to teach. Kinda like that saying goes …. teach a man to fish, you know? :wink:

1 Like