# Quick way to Observe multiple properties on Object

**URL:** <https://discourse.aurelia.io/t/quick-way-to-observe-multiple-properties-on-object/3160>\
**Category:** Help Requests\
**Created:** [January 16, 2020, 8:45am UTC](https://discourse.aurelia.io/t/quick-way-to-observe-multiple-properties-on-object/3160 "2020-01-16T08:45:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![anderschbe](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/anderschbe/32/1316_2.png) [@anderschbe](https://discourse.aurelia.io/u/anderschbe)\
**Post date:** [January 16, 2020, 8:45am UTC](https://discourse.aurelia.io/t/quick-way-to-observe-multiple-properties-on-object/3160/1 "2020-01-16T08:45:01Z")

</div>

Short background:

I’m implementing a vis-timeline, and want to dynamically load data onRangeChanged. Simple, BUT not very performant, calling for a thrtolle/debounce. Also not to taxing, but trying to do so cleanly, I wanted to use Aurelias built-in propertyObserver, and listen on a simple range object (two properties only, start, end).

Now this can be easily done with the verbose bindingEngine approach… but is there a way to keep it smaller with something similar to the @observable decorator?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 16, 2020, 2:30pm UTC](https://discourse.aurelia.io/t/quick-way-to-observe-multiple-properties-on-object/3160/2 "2020-01-16T14:30:08Z")

</div>

Here is an example of subscribing to multiple properties at once and call change handler only once [https://codesandbox.io/s/elegant-greider-hihl3](https://codesandbox.io/s/elegant-greider-hihl3)

The difference compared to observable is we need to queue the callback to next tick, to ensure all the changes has been in place. You can have a look at the method `generateRandomName` to see this (callback needs to be called after both first/last names have been changed)

---

<div class="post-metadata">

**Author:** ![manks](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/manks/32/1995_2.png) [@manks](https://discourse.aurelia.io/u/manks)\
**Post date:** [March 17, 2022, 12:53am UTC](https://discourse.aurelia.io/t/quick-way-to-observe-multiple-properties-on-object/3160/3 "2022-03-17T00:53:32Z")

</div>

Why hasn’t something like `propertiesObserver` made it’s way into the official framework?

---

<div class="post-metadata">

**Author:** ![manks](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/manks/32/1995_2.png) [@manks](https://discourse.aurelia.io/u/manks)\
**Post date:** [March 17, 2022, 4:17am UTC](https://discourse.aurelia.io/t/quick-way-to-observe-multiple-properties-on-object/3160/4 "2022-03-17T04:17:57Z")

</div>

Thinking about this a bit more, is it possible to have the framework do a deep observe on an object, either explicitly or implicitly?

Some ideas to consider:

```javascript

class ClassX {
   @observable propA;
   propB; // Not observed
   @observable propC;
}

@inject(...)
export class SomeComponent {
   @observable propX = new ClassX(); // recursively inspects observable properties

   propXChanged(newValue, oldValue, propertyPath) { // propX, propX.propA, propX.propB, propX.propC
   }
}

```

or

```javascript
@inject(...)
export class SomeComponent {
   @observable({ depth: 1}) propX = {
        propA: ...,
        propB: ...,
        propC: ....
   };

   private propXChanged(newValue, oldValue, propertyPath) { // propX, propX.propA, propX.propB, propX.propC
   }
}

```

Just some ideas.

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [March 17, 2022, 6:50pm UTC](https://discourse.aurelia.io/t/quick-way-to-observe-multiple-properties-on-object/3160/5 "2022-03-17T18:50:35Z")

</div>

I would say that observing all properties of an object might be expensive and should be done only in special circumstances. And to that end, the solution from @bigopon should work quite nicely.

Contextually, it should be noted that there is this awesome `@watch` decorator: [GitHub - bigopon/aurelia-watch-decorator: A decorator to reduce boilerplate in your Aurelia project](https://github.com/bigopon/aurelia-watch-decorator#readme) that is now a part of the official Au2.

---

<div class="post-metadata">

**Author:** ![manks](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/manks/32/1995_2.png) [@manks](https://discourse.aurelia.io/u/manks)\
**Post date:** [March 18, 2022, 2:39am UTC](https://discourse.aurelia.io/t/quick-way-to-observe-multiple-properties-on-object/3160/6 "2022-03-18T02:39:34Z")

</div>

I’m running into an issue that’s going to require another topic, and it involves object property observation.

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [March 18, 2022, 5:27am UTC](https://discourse.aurelia.io/t/quick-way-to-observe-multiple-properties-on-object/3160/7 "2022-03-18T05:27:09Z")

</div>

If the need of observation is limited to a specific are of the app, then you can have a proxy-based solution (refer: [Proxy - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)). Otherwise, it might be better to stick to the individual property observation.