How to use .forItems() on a repeater?

Ask the community
,
1

I am trying to use the .forItems() function on a repeater to target only a limited number of selected repeater-items, but since .forItems() requires an array with DIFFERENT IDs as first argument and each item in the repeater shares the SAME ID: there is no way to make it work. Suggestions please?

2

So, a repeater in WIX has to have different IDs for each element inside of it, otherwise it is not going to work. And the method you are trying to use, receives an array of elements IDs that are present on the current repeater data, and a callback function that runs on each element on the repeater that you specified on the array of IDs.

Would you care to explain what are you trying to do so I can assist you in a better way?

3

Thank you for your reply Bruno.
I have a repeater with multiple checkboxGroups (the repeated items on the left side of the image) that I’m using to filter the ‘products dataset’ displayed on the right side of the image. I would like to target only few of them (i.e. Brand, Price) with JS, but at the moment I have to loop through the entire repeater because they all share the same ID.

1404×693 106 KB

Also I have another question:

At the moment i’m filtering the products dataset with the following code:

filter = WixData.filter();

filter = filter. hasSome (‘brand’, value)
.or(filter. hasSome (‘store’, value))
.or(filter. hasSome (‘type’, value))
.or(filter. hasSome (‘connection’, value))
.or(filter. hasSome (‘microphone’, value));
.or(filter. between (‘price’, minNumber, maxNumber));

$w(dataset).setFilter(filter);

It worked fine until i’ve added the highlighted part. It appears that chaining different . hasSome() with a .or() conditions allow to filter the dataset correctly, however once i’ve added a .between() the filter gets overwritten by the last condition.
As a result I can only filter using price range and all the other filters get ignored.
Could you help me with this please?

4

Ok, I think I understood. What you want is to get the value of the selected repeater so you can filter the products repeater, right?

For that you could loop through the filter repeater trying to find which checkbox is true, like so:

import wixData from 'wix-data'

let selectedBrandFilter = []
let selectedTypeFilter = []
let selectedStoreFilter = []

let brandFilter = wixData.filter().hasSome('brand', selectedBrandFilter)
let typeFilter = wixData.filter().hasSome('type', selectedTypeFilter)
let storeFilter = wixData.filter().hasSome('store', selectedStoreFilter)

const addFilter = (array, value) => array.push(value)

const removeFilter = (array, value) => {
    const newFilter = array.filter(item => item !== value)
    array = newFilter
}

$w.onReady(() => {
    $w('#repeaterFilter').forEachItem(($item) => {
        $item('#checkboxBrand').onChange((e) => {
            e.target.checked ? addFilter(selectedBrandFilter, e.target.value) : removeFilter(selectedBrandFilter, e.target.value)
        })
        $item('#checkboxStore').onChange((e) => {
            e.target.checked ? addFilter(selectedBrandFilter, e.target.value) : removeFilter(selectedBrandFilter, e.target.value)
        })
        $item('#checkboxType').onChange((e) => {
            e.target.checked ? addFilter(selectedBrandFilter, e.target.value) : removeFilter(selectedBrandFilter, e.target.value)
        })
    })
    $w('#dataset').setFilter(brandFilter.or(typeFilter).or(storeFilter))
})

You are going to have to create one for each filter you need.

Haven’t tested this, but if it works, then we can try to fix the price filter.

5

Thank you again Bruno!

Unfortunately I cannot target the repeater’s items by their unique ID because they all have the same ID (if I try to change one, they all update automatically)

I found a workaround for the ‘price’ filter issue, however it would be nice to know how to assign unique IDs to a repeater’s items for the future. If you can help me on that it would be great :slight_smile:

6

@hideon96 I did not understand what you are trying to do. The repeater only works with unique ids for each item. They do not share ids.

7

They do. For example, If I wanted to name one item’s checkboxGroup’s ID something like ‘#checkboxBrand’ , the IDs of all the other checkboxGroups inside the repeater update to the same value: ‘#checkboxBrand’ . So I end up having 6 items with the same ID.

8

@hideon96 I’m really sorry for the confusion, you are right, every WIX Element inside the repeater will have the same ID, but they will have a different data _id , that was what I was referring to. You can target the checkbox element by other properties like value , label and by it’s data. And, the way WIX differentiates one from another is from the parameters callbacks from the .onItemReady() , .forEachItem() and .forItems() methods, that we commonly name $item() .

9

Thank you Bruno, in this case a have 2 questions.

  • How do I change the value of an item’s data._id ? at the moment they are set by default.
  • How do I use .forItems( ) , since this function requires an array of different items’ IDs as first argument, such as: repetitor.forItems([‘#item1’, ‘#item4’])
10

Thank you Bruno. In this case I have a questions:
How do you change the value of an item’s data._id , since it is set by default?

11

@hideon96 this _id property comes from the item position in the collection that is connected to your dataset. I can/should not change this _id . Why do you need to change it in the first place? What are you trying to achieve?

12

@bwprado I’m trying to figure out what the highlighted arguments represent here:

repetitor.forItems([’ item1 ', ’ item4 '], ($item, itemData, index)= > { } )

Initially, I thought those were the IDs of the repeater’s items, but we have acknowledged that it’s not possible. So I was was wondering if the highlighted values represent the _id property or something else?

In case those represent the [’ item1 ', ’ item4 '] represent the _id property, it would be nice to rename them so that they can easily be associated with the item they’re referring to. For instance if the items is a list of brands, I’d like the _id to be something like ’ itemBrands '.

13

@hideon96 so, I think that is a good case for changing the documentation.

@marlowe-shaeffer , can you ask someone to clarify the documentation regarding the .forItems() method?

As I test it, the IDs are not the name of the elements inside the repeater, but the ID they get from the data they are connected to.

So if you use an ID like “d99d3cc8-bc75-ec47-6c72-f713016f98f3” , it is going to work as intended, but the API Documentation is not that clear.

Here is the example I tested it:

$w.onReady(function () {
    $w('#repeater1').forItems(
        [
            '7bb38a7a-70b7-9cf3-fc80-584205694465',
            'd99d3cc8-bc75-ec47-6c72-f713016f98f3',
        ],
        ($item, itemData, index) => {
            console.log(index)
        }
    )
})
14

@bwprado I’ve shared your comment with the Docs team. Thanks for letting us know.