Filter(), FindIndex(), ... on Repeater

Ask the community
, ,
1

Hi!

Repeaters have no children property:

475×709 45.6 KB

What’s the alternative?

I’d like to somehow apply filter() functions (see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)) or findIndex() functions on the repeater in order to quickly find which item was a.o manipulated by the user in the front end.

I’d like to avoid having to:

  • use ForEachItem()
  • store data[i]._id (the manipulated item) in a global variable

Thanks!

2

I’m not sure I got wat you were trying to achieve.
But you can run .filter() or .findIndex() on the repeater.data
Maybe you can elaborate on what you’re trying to do.

3

I want to be able to run those type of functions on the actual children that are there in the designer e.g. the ‘containers’ of the repeater (not known by that name anymore in EditorX though, now they are items), the boxes I’ve added to the repeater, … But since there’s no such property, it’s only possible when you add them to your repeater.data using itemData or something. If you don’t do that, you cannot easily access those ‘children’.

4

@vervoortyves if you don’t want to use forEachItem, you can do something like this:

let children = [];
$w("#repeater1").onItemReady(($i, iData, inx) => {
		if(inx === 0){children = [];}
		children.push($i);
	})

Then you can do whatever you wish with children. for example:

let ElementsWithHiddenButtons = children.filter(e => e("#button1").hidden);
children[3]("#image1").src = "some-url";
//etc...
5

I don’t know what you want to do, but you can easily access the children using the:

let $item = $w.at(event.context)

You just have to select one item inside the repeater the get the context and manipulate it, like this:

$w.onReady(() => {
    $w("#textRepeater").onClick((event, $item) => {
        $item = $w.at(event.context) //This creates the context (the item inside the repeater)
        $item("#textRepeater").text = "Clicked!" //This changes the text in the context
        console.log(event.context.itemId)
 })
})

And if you want to get the data of the item that was clicked, you just need to use:

let data = $w("#repeater").data
let clickedItem = data.find(item => item._id === event.context.itemId)
6

@jonatandor35 Loved this solution, have never seen before, must try!

7

Ah, and as was said before, you can whatever you want with the repeater data, just as any other object in JavaScript.

8

@jonatandor35 so basically building up my own children property. Thanks for the suggestion!

9

Hi Bruno, thanks. Yes, that I know.

10

@jonatandor35 Just tried your solution and it is amazing!