Need help with Complex Dynamic Attribute

Wappler General
#1

I have got some fairly complex repeats and dynamic attributes. I know that setting up a dynamic attribute can be done like this

dmx-on:change="modal1.form2.input2_group['a2_id_' + var_id_number.value + '_0'].select(false)"

which will output as
modal1.form2.input2_group.a2_id_125_0.select(false)
and where var_id_number is a variable set-up on the page.

BUT, what if I want to put the input2_group as a dynamic as well? So I tried…

dmx-on:change="modal1.form2['Group_Paint_' + carparts_id]['a2_id_' + var_id_number.value + '_0'].select(false)"

but this doesn’t work.
I then put a full-stop between the middle two square brackets like

dmx-on:change="modal1.form2['Group_Paint_' + carparts_id].['a2_id_' + var_id_number.value + '_0'].select(false)"

but this doesn’t work.
I could create both dynamic parts as variables and put variables in like this…

dmx-on:change="modal1.form2.var_group_paint.value.var_a2_id.value.select(false)"

But this doesn’t work.

I am sure the syntax is simple but I am struggling to guess it.
Can somebody give advice please.

#2

What does it return?
I mean the onchange event what does it display. Does it get carparts_id value?

#3

Because it is a dmx-on:change you cannot see the code that creates or returns.

In this case it is used to turn off/deselect/uncheck a checkbox.

The first example above works. The lower example with two dynamics does not work.

Does that help?

#4

You need to find the common parent first. Lets assume that input2_group is the common parent id, then the expression would become something like input2_group['a2_id_' + var_id_number.value + '_0'].select(false). So you start with the common parent id and then the path to the component.

A problem is with repeaters, lets say the component is the direct child of a repeater with id repeat1. Then following the above you would make an expression like repeat1['a2_id_' + var_id_number.value + '_0'].select(false), this will not work. The solutions here is picking the correct index of the repeating items repeat1[$index]['a2_id_' + var_id_number.value + '_0'].select(false).

The expression path depends on the component where it is placed on and the component it is pointing to, find the common parent and create a path from that.

#5

Thanks for the input Patrick, always very useful.

For example, are either of these valid ways of writing an expression? Just trying to understand the way to write rather than actual working code? I am trying to understand how the variable var_id_number1 would fit in.
repeat1[$index][var_id_number.value].select(false)
repeat1[$index]var_id_number.value.select(false)

Also, is there a way to see the compiled code, perhaps in Wappler or DevTools? As mentioned above, we can’t actually see the compiled code for dmx-on:change, or can we?

#6

Do you have some JavaScript knowledge? It works the same as with JavaScript object.

https://www.w3schools.com/js/js_object_properties.asp
https://www.w3schools.com/js/js_objects.asp

Lets assume the following variables:

var foo= { bar: true };
var arr = [{ value: 1 }, { value: 2 }]

To get the property bar from the foo object you use foo.bar or you can access it using foo['bar'].

To get the value property from the first array index you use arr[0].value, an alternative way would be arr[0]['value']. You can’t access array indexes with the dot notation, arr.0 is an invalid expression.

When using the brackets you can make this dynamic, see following example:

var arr = [{ value: 'hello' }, { value: 'world' }];
var index = 1;
var key = 'value';
console.log(arr[index][key]); // will output world

From your samples the second repeat1[$index]var_id_number.value.select(false) is an invalid expression. To make it valid it should become repeat1[$index].var_id_number.value.select(false), but this is probably not the expression you are looking for and it is not the same as repeat1[$index][var_id_number.value].select(false).

The expressions between the brackets is evaluated first, so $index will return a number and var_id_number.value will probably return some string, this is then used in the outer expression to select the correct index from the repeat array and the specific property from the object in the array.

5 Likes