Observe change of object proprty in nested array in Ember.js

Question

We have this data structure

[[{foo:"12", bar:"34"}, {foo:"33", bar:"55"}], [{foo:"45", bar:"67"}]]

How is it possible to make a computed property to observe a change on foo or bar?

It depends on what you need to cover. What about array[0][0] = {foo:"89", bar:"01"} would that constitute as a change? — Thomas
– Thomas, Commented Oct 9, 2019 at 13:51
The objects in the arrays dont get overwritten, only their properties change or objects are added. — Yelinz
– Yelinz, Commented Oct 9, 2019 at 13:56

stevenelberger · Accepted Answer · 2019-10-09 18:08:21Z

1

Normally you use [email protected] in a computed property to watch specific object properties in an array but in the case of nested arrays (or nested objects), you can't do .@[email protected] because .@each only works one level deep.

You need to use intermediary computed properties to raise the inner objects up one (or more) levels and have another computed property watch these in turn. There may be other ways to wire things up, but this is a pretty straightforward way to do it.

Here's a twiddle that demonstrates it. If you open the console you can see the individual computed properties recording a change occurring.

You can also use an alias to pull the inner arrays / objects up a level or two.

answered Oct 9, 2019 at 18:08

stevenelberger

1,3781 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Observe change of object proprty in nested array in Ember.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related