Binding issue in repeat.for in aurelia

I have a list of cards that i populate, when i click on each card i want to get and display the correct items displayed for that card. The problem i am facing is that when i return an array its not binding the correct item to the specific card.

This is my HTML

<div repeat.for="Grouping of categoryItems">
                    <div class="row">
                        <div class="col s12 m3 l3">
                            <div class="card blue-grey darken-1">
                                <div class="card-content" style="padding:10px">
                                    <span class="card-title white-text truncate">${Grouping.name}</span>
                                    <a if.bind="Grouping.hideDetails" class="btn-floating halfway-fab waves-effect waves-light" click.delegate="Activate(list, Grouping)"><i class="material-icons">add</i></a>                                     
                                </div>
                            </div>
                        </div>
                    </div>
                    <div repeat.for="categoryGroupingTypes of categoryItemTypes">
                        <div class="row" if.bind="!Grouping.hideDetails">


                            
                            <div class="col" style="position:absolute;padding:5%">
                                <div class="rotate-text-90-negative">
                                    <span class="blue-grey-text"><b>${categoryGroupingTypes.name}</b></span>
                                </div>

                            </div>
                            <div repeat.for="item of categoryItemsTypes.items" class="col s12 m3 l3 ">
                                
                                    <div class="card-content">
                                        <span class="card-title white-text truncate">${items.Name} ${items.Quantity}</span>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>                  
                     </div>

my ts

async Activate(list: ListModel[], grouping: any) {
            
        this.categoryItemsTypes = await this.getTypes(list);
        let result = this.categoryItem.filter(x => x.name == grouping.name)
        if (result) {
            grouping.hideDetails = false;
        }
            
    }

so this.categoryItemsTypes has the following array

0: {name: "Clothes", items: Array(3)}
1: {name: "Shoes", items: Array(2)}

so when the page loads it loads the cards as follows

then when i click on “Clothes” i only want it to load the array associated with clothes and if “shoes” is clicked then only load that array as follows

but what is currently happening with my above code is the following

this line is where i bind the items

repeat.for="item of categoryItemsTypes.items"

how can i bind the items to the correct ${Grouping.name} as shown in picture 2?

Answer

You are in the right direction, but not complete yet. Array assignment are not observed by aurelia. In general, when populating arrays with a new set of elements, this is a good way:

destarray.splice(0, destarray.length, ...sourcearray);

over

destarray = sourcearray;

because the former is observed by aurelia by default and the latter is not.