How to observe object property ?

Community Help
1

Hi all,

Congratulations for the overall impressive work !! I come from Jupyter and am testing ObservableHQ and it’s different and great !

My problem:

I am trying to observe an object property in the simplest possible way. But so far my ‘solution’ is very very, and I’m sure unnecessarily, complex/cumbersome: https://observablehq.com/@oscar6echo/observe-object-property

I tried to get inspiration from this reference notebook: https://observablehq.com/@mbostock/socket-sharing

But I could not attach an event to a regular object so I introduced an intermediary div. That’s heavy, isn’t it ?

I could extract the current value of an object/prop with a cell like:

{ while (true) { yield obj.myprop }}

But it seems too much useless computation. Right ?

I also played around (a bit randomly) with viewof and View from https://observablehq.com/@mbostock/synchronized-views
but did not succeed in displaying the updated object and/of property.

I’m used to vuejs and in that case I would create a computed property in a component to extract a given prop from an object and make it reactive.

How should I do in ObservableHQ ?
I would be grateful for pointers as this little (?) obstacle is blocking me…

2

Hi @oscar6echo,

Observable’s reactivity works naturally at the cell level. So the easiest way to structure this is going to be breaking up the individual properties you want to have your program react to, each into a cell of its own. For more info on how exactly this works, see:

And if you want to have more fine-grained control over when reactive values update, there are also mutable values at your disposal:

But it sounds like perhaps you’re trying to do something a little bit different. If you don’t mind sharing a bit more of the problem you’re trying to solve, and telling us more about why you want to observe an object property instead of just a value, that would help us give better advice.

3

Thx very much @jashkenas ! :+1:
The solution is indeed mutable. I had read about it before, but failed to remember it enables a simple solution.
I updated the notebook accordingly: @oscar6echo/observe-object-property

To give some context, I am trying to update a variable in a callback to a graphql subscription. This is why I first took inspiration from notebook @mbostock/socket-sharing.
In the context of a callback I can only change the property of an object I keep a handle on (not a variable defined elsewhere). But finally mutable makes reactivity quite simple and flexible !