How do I use the computed twig element to get the value from a custom composite element?

Question

I have created a custom composite element by cloning the example module of Drupal 8 Webforms. It has a radio button and 4 select boxes. So when clicking 'Add" button, another row is being created, and likewise a series of 10 clicks would make the page too lengthy.

I need to list out a selected element ( Product ) in another table beneath the custom composite, and hide the filled row when the 'Add' button is clicked.

Since I am relatively new to Drupal 8, I have no idea how to achieve this. I tried using computed twig to fetch the data from products table using the syntax {{data.products.product}} where products is the key of the custom composite element & product is the select field inside the composite element. I didn't receive any output following the above syntax.

Could anyone help me out here ?

Answer 1

I suppose I can answer my own question.

It didn't work because I didn't use the delta. For this to work, I need to do this instead

{% for data.products as p %}
{{ p.product }}
{% endfor %}

This is because we are using a custom composite element where the products are stored like

$products[0]['product']
$products[1][product']
...

I missed the array key and hence didn't get any value to the element in the custom composite.

FYI: The answer was in the 'Help' section of the module already, but couldn't really understand it well at the time.