# Computed property: detect changes in dynamic object keys

**URL:** <https://discuss.emberjs.com/t/computed-property-detect-changes-in-dynamic-object-keys/18102>\
**Category:** General\
**Created:** [August 4, 2020, 5:12am UTC](https://discuss.emberjs.com/t/computed-property-detect-changes-in-dynamic-object-keys/18102 "2020-08-04T05:12:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![orangesoundsnice](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/orangesoundsnice/32/17117_2.png) [@orangesoundsnice](https://discuss.emberjs.com/u/orangesoundsnice)\
**Post date:** [August 4, 2020, 5:12am UTC](https://discuss.emberjs.com/t/computed-property-detect-changes-in-dynamic-object-keys/18102/1 "2020-08-04T05:12:42Z")

</div>

Let’s say I have the following:

```auto
expandedStates: null,

init() {
  this._super(...arguments);
  // dynamic shape e.g. { isExpanded __1: true, isExpanded__ 2: false, ...etc }
  this.set('expandedStates', {});
}

expand: function(id) {
  const key = `isExpanded__${id}`;
  this.set(`expandedStates.${key}`, true);
}

collapse: function(id) {
  const key = `isExpanded__${id}`;
  this.set(`expandedStates.${key}`, false);
}

// can you make this recompute? 
allExpanded: computed('expandedStates', function() {

});

```

How can you recompute when keys are added to/removed from `expandedStates` and when the keys themselves are changing? (like from true to false and vice versa)

I was hoping there’d be something like

```auto
// this doesn't work but it'd be convenient if it did
allExpanded: computed('expandedStates.{*}', function() {

});

```

---

<div class="post-metadata">

**Author:** ![wuarmin](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wuarmin/32/16390_2.png) [@wuarmin](https://discuss.emberjs.com/u/wuarmin)\
**Post date:** [August 4, 2020, 8:21am UTC](https://discuss.emberjs.com/t/computed-property-detect-changes-in-dynamic-object-keys/18102/2 "2020-08-04T08:21:35Z")

</div>

You can do either…

```auto
allExpanded: computed('expandedStates.{isExpanded __1,isExpanded__ 2,isExpanded__3}', function() {

});

```

or …

```auto
expand: function(id) {
  const key = `isExpanded__${key}`;
  this.set('expandedStates', {
    ...this.expandedStates,
    [`expandedStates.${key}`]: true
  });
}

```

---

<div class="post-metadata">

**Author:** ![orangesoundsnice](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/orangesoundsnice/32/17117_2.png) [@orangesoundsnice](https://discuss.emberjs.com/u/orangesoundsnice)\
**Post date:** [August 4, 2020, 5:12pm UTC](https://discuss.emberjs.com/t/computed-property-detect-changes-in-dynamic-object-keys/18102/4 "2020-08-04T17:12:05Z")

</div>

The second option works for my use case! Replacing the entire object instead of updating the keys will trigger a recompute. Makes sense, thanks @wuarmin!

---

<div class="post-metadata">

**Author:** ![pzuraq](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/pzuraq/32/13754_2.png) [@pzuraq](https://discuss.emberjs.com/u/pzuraq)\
**Post date:** [August 6, 2020, 2:41pm UTC](https://discuss.emberjs.com/t/computed-property-detect-changes-in-dynamic-object-keys/18102/5 "2020-08-06T14:41:01Z")

</div>

@orangesoundsnice One thing to note is that with autotracking, this becomes much easier! For instance, the `tracked-built-ins` library provides a tracked POJO: [GitHub - tracked-tools/tracked-built-ins: Tracked versions of JavaScript's built-in classes](https://github.com/pzuraq/tracked-built-ins)

Using tracked POJOs automatically tracks based on their usage. So, if you loop over all of the keys of the object, it will entangle the entire object. If any keys are added, removed, or updated, then it will recompute:

```nohighlight
expandedStates = tracked({});

allExpanded() {
  for (let key in this.expandedStates) {
    // ...
  }
}

```