# Array of object change from click.delegate

**URL:** <https://discourse.aurelia.io/t/array-of-object-change-from-click-delegate/4243>\
**Category:** Help Requests\
**Created:** [June 6, 2021, 9:13am UTC](https://discourse.aurelia.io/t/array-of-object-change-from-click-delegate/4243 "2021-06-06T09:13:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![suvir](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/suvir/32/1989_2.png) [@suvir](https://discourse.aurelia.io/u/suvir)\
**Post date:** [June 6, 2021, 9:13am UTC](https://discourse.aurelia.io/t/array-of-object-change-from-click-delegate/4243/1 "2021-06-06T09:13:40Z")

</div>

I have two array of objects, selectedBandKind and selectedBandId. I am using them to select multiple checkboxes at the same time. I am also using them to show the desired icon. It is just an array of object and not collection.

I thought about using collection, but i needed to pass some arguments, so i am using click.delegate. In the click.delegate callback, i am changing the content of the array and i can see the change happening in console.log. But array is not reflecting the change in the View. Any idea why?

```auto
<div class="workflow-module-analysis-legend-data-cell" repeat.for="BandKind of BandKinds.All().splice(1)">
    <a class="workflow-module-analysis-legend-checkbox ${selectedBandKind[$parent.$index] === BandKind && selectedBandId[$parent.$index] === measurement.id ? 'selected': ''}"
       click.delegate="selectBand(measurement.id, BandKind, $parent.$index)"
       title="Show ${BandKind.name} bands for '${measurement.name}.'">
        <fa-icon icon="${selectedBandKind[$parent.$index] === BandKind && selectedBandId[$parent.$index] === measurement.id ? 'fas fa-check': 'fas fa-check-circle'}"></fa-icon>
    </a>
</div>

```

and click.delegate function is

```auto
public selectBand(id: string, bandKind: BandKind, index: string): void
{
    this.busy = true;
    
   this.selectedBandId = this.selectedBandId === id && this.selectedBandKind === bandKind ? undefined : id
   this.selectedBandKind[index] = bandKind; 

    this.busy = false;
}

```

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [June 6, 2021, 4:17pm UTC](https://discourse.aurelia.io/t/array-of-object-change-from-click-delegate/4243/2 "2021-06-06T16:17:11Z")

</div>

When you’re changing by index, that won’t be changing the View, you need to do something that will trigger a dirty change (like a `splice`). You can see the answer that I asked for the same kind of question couple years ago on Stack Overflow [How to force binding re-evaluate or re-rendering in Aurelia](https://stackoverflow.com/questions/36394399/how-to-force-binding-re-evaluate-or-re-rendering-in-aurelia)

---

<div class="post-metadata">

**Author:** ![suvir](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/suvir/32/1989_2.png) [@suvir](https://discourse.aurelia.io/u/suvir)\
**Post date:** [June 6, 2021, 4:46pm UTC](https://discourse.aurelia.io/t/array-of-object-change-from-click-delegate/4243/3 "2021-06-06T16:46:34Z")

</div>

still does not work.

```auto
public selectBand(id: string, BandKind: BandKind, index: string): void
    {
        this.busy = true;
        this.selectedBandId.splice(parseInt(index), 1, this.selectedBandId[index] === id && this.selectedBandKind[index] === BandKind ? undefined : id);    
        console.log("selectedBandId ", this.selectedBandId[index]);

        this.selectedBandKind.splice(parseInt(index), 1, BandKind);
        console.log("selectedBandKind ", this.selectedBandKind[index]);

        this.busy = false;
    }

```

Even though i can see the change in console.log.

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [June 7, 2021, 1:30am UTC](https://discourse.aurelia.io/t/array-of-object-change-from-click-delegate/4243/4 "2021-06-07T01:30:36Z")

</div>

You’re still using array indexes in the View so that still probably won’t work. I think in your case you’ll need to use some Matcher, check this [Objects with Matcher](https://aurelia.io/docs/binding/checkboxes#array-of-objects-with-matcher)

---

<div class="post-metadata">

**Author:** ![suvir](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/suvir/32/1989_2.png) [@suvir](https://discourse.aurelia.io/u/suvir)\
**Post date:** [June 7, 2021, 8:40am UTC](https://discourse.aurelia.io/t/array-of-object-change-from-click-delegate/4243/5 "2021-06-07T08:40:47Z")

</div>

It seems a bit complicated to me…can you give a bit more hint…like how would matcher would look in above case…

---

<div class="post-metadata">

**Author:** ![avrahamcool](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/avrahamcool/32/368_2.png) [@avrahamcool](https://discourse.aurelia.io/u/avrahamcool)\
**Post date:** [June 7, 2021, 5:18pm UTC](https://discourse.aurelia.io/t/array-of-object-change-from-click-delegate/4243/6 "2021-06-07T17:18:39Z")

</div>

can you ctreate a small code-sandbox that demonstrate the problem?  
I’m sure we’ll be able to help you more…