Monitor changes on object property

Question

Say I have an object similar to the following:

Cars = {
    "car_one": {
        data: {
            make: "Ford",
            model: "Festiva"
        },
        img: "car_one.jpg"
    },
    "car_two": {
        data: {
            make: "Chevy",
            model: "Pinto",
            color: "Green"
        },
        img: "car_two.jpg"
    }
    ...and so on...
}

I am hoping to find a way to monitor just the data property (and all sub-properties) for changes, then be able to setup a function to fire.

I have been looking at Object.watch() but testing seems to show that I would need to have it manually setup to check each property of Cars.{some_car}.data which (as shown in my example) isn't a constant set. I guess I'm hoping there's a less complex method that I'm just not aware of.

If you are using a Gecko based browser, you can use [getters and setters](https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects?redirectlocale=en-US&redirectslug=Core_JavaScript_1.5_Guide%2FWorking_with_Objects#Defining_getters_and_setters). However, they are not part of ECMAScript and are only supported by about half (complete guess) of the browsers in use. — RobG, Apr 08 '13 at 01:12
Someday you'll be able to use `Proxy`. It's coming in ECMAScript 6. There's a current implementation in Firefox, but since the standard isn't finalized, I don't know how compliant it is. I think Chrome has it if you enable its experimental JavaScript features. — , Apr 08 '13 at 01:12
@RobG: Are you referring to the legacy `__defineGetter__` syntax? ECMAScript 5 has get and set behaviors for properties, just using a different syntax. — , Apr 08 '13 at 01:16
@amnotiam—no, the link I provided is to the *Defining getters and setters* section of the MDN article on Objects (which also covers `__defineGetter__` and `__defineSetter__`). Do you have an ES5 reference? I'm told it's in there but I can't find it. — RobG, Apr 08 '13 at 04:57
@RobG: It's in the object initializer syntax under *Property Assignment*: http://es5.github.io/#x11.1.5 — , Apr 08 '13 at 05:22
...there's also the *PropertyDescriptor* syntax, points 7 and 8: http://es5.github.io/#x8.10.5 — , Apr 08 '13 at 05:29

score 1 · Accepted Answer · answered Apr 08 '13 at 01:16

Depending on how much control you have over how its called, you could make an accessor function. The function could take an object as an argument, and set that object as the current value if the argument is set. For your use you can add a trigger of some type here. If no argument is passed it would return the current value.

Thats the type of API that knockout uses to great effect.

In modern browsers, getters and setters make this easy. For older values you could have an accessing property and then another property that serves as the holder for the data.

score 1 · Answer 2 · edited May 23 '17 at 10:25

Unfortunately, as of today the easiest way would probably be to loop over the properties in data and call Object.watch for each of them. However, we might have Object.observe at the rescue eventually. If you are looking for a cross-browser Obect.watch implementation, have a look here.

Other alternatives would be to wrap your data in an observable object that allows to modify the data through a generic set method that would fire events when some properties are modified or to have some property watching task that would execute at a specific interval or triggered by specific actions that would check the object for changes. However, these alternatives are not any simpler.

Monitor changes on object property

2 Answers2