How do I get the container of the repeater in Velo, when I have its data?

Question

I am trying to make a button, which scrolls to the container of the repeater. Every tutorial, question on SO or documentation describes the other way around - how to get data from container (by OnClick event for example). However not a single one suggests, how can I do, what I'm trying to do.

This is the fragment of the code I have:

$w.onReady(function () {
    $w('Button').onClick((event) => {
        let whichButtonWasPressed = event.target.id; //The letter of the button
        let repeater = $w('#repeater1');
        for (let i = 0; i < repeater.data.length; i++) {
            if (whichButtonWasPressed == repeater.data[i].nazwisko[0]) //Compare the button letter with the first letter of surname of the author of the container
            {
                console.log(repeater.data[i]);
                break;
                
            }
        }
    })
});

To explain the code: On Click of a button with a letter it saves, which letter it represents, checks the data of the repeater, finds the first match of a surname. Then is the moment where I am stuck. I just need to get the object (container), to call a ScrollTo() function.

Ideas I've come up with, but don't work: $w() with id, that is stored in the data of the repeater, is not working (my guess is that it's an id which is assigned after the repeater is filled with data, so it doesn't exist in that context The repeater object for some reason does not have children property, so I cannot just loop for every child container and compare strings. I cannot use DOM, as Velo forbids that. There is one question (downvoted) about that, where people suggest using DOM, however, as previously stated, that is impossible because of limitations of the WIX editor.

Answer 1

Definitely doable. You just need to swap your for loop with using the forEachItem() function. This will loop through all the items in the repeater (not the repeater data like you're doing). You need to loop through the repeater itself so that you can get the $item() scoped selector function of the item you want to scroll to.

Here's a stab at the code. I probably don't have all your ids and property names right (I use #containerBox for the repeater item container and I took .nazwisko[0 from your code above), but this should put you in the right directions.

$w.onReady(function () {
    $w('Button').onClick((event) => {
        let whichButtonWasPressed = event.target.id;
        $w('#repeater1').forEachItem(($item, itemData, index) => {
            if(itemData.nazwisko[0] === whichButtonWasPressed) {
                $item('#containerBox').scrollTo()
            }
        })
    })
});