Twig For Loop Fails to Iterate Over Nested Schema Properties - twig

Question

I'm new to twig, and I'm trying to create a nav menu with sub menus from a provided schema which looks like this-
menu_items: [
{
url: 'http://testurl.com',
text: 'Menu Item 1',
active: true,
sub_menu: [
{
url: 'http://testurl.com',
text: 'Sub menu Item 1',
},
{
url: 'http://testurl.com',
text: 'Sub menu Item 2',
},
],
},
]
The menu is showing up just fine, but I'm struggling to get the correct syntax to get those sub menu items populated. I put an if statement in because there's not always a sub menu, and then a for loop to create a list item for each sub menu item in the schema, but alas.
{% if menu_items %}
<nav>
<ul>
{% for item in menu_items %}
<li>
{{ item.text }}
{% if item.sub_menu %}
<ul>
{% for sub_menu in item %}
<li>
<a href="{{ item.sub_menu.url }}">
{{ item.sub_menu.text }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
Anyone know where I'm going wrong?

Answer 1

It looks like you are not referencing the sub_menu items correctly. Try
{% for sub in item.sub_menu %} ... {% endfor %}
It's also helpful if the sub_menu array is empty. The empty test evaluates to true if the variable is null, false, an empty array, or an empty string
{% if item.sub_menu is not empty %} ... {% endif %}