How to iterate through an array of arrays in Twig

Question

This is continuing from a previous post here. My twig file below can go two levels and using for loops but I have much more children within the children. The object contains an array of arrays and is in a hierarchical order. I am looking for a recursive solution if possible. It may be also helpful but not necessary that I am using bootstrap.

Twig:

{% extends 'CompanyMyBundle::base.html.twig' %}

{% block body -%}
    <h1>Org list</h1>

    <table class="records_list">
        <thead>
            <tr>
                <th>name</th>
                <th>parentid</th>
                <th>id</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for entity in entities %}
            <tr>
                <td><a href="{{ path('org_show', { 'id': entity.Id }) }}">{{ entity.Name }}</a></td>
               <td>{{ entity.ParentId }}</td>
                <td>{{ entity.Id }}</td>
                <td>
                    <ul>
                        <li>
                            <a href="{{ path('org_show', { 'id': entity.Id }) }}">show</a>
                        </li>
                        <li>
                            <a href="{{ path('org_edit', { 'id': entity.Id }) }}">edit</a>
                        </li>
                    </ul>
                </td>
            </tr>
            {% for child in entity.children %}
            <tr>
                <td><a href="{{ path('org_show', { 'id': child.Id }) }}">{{ child.Name }}</a></td>
                <td>{{ child.ParentId }}</td>
                <td>{{ child.Id }}</td>
                <td>
                <ul>
                    <li>
                        <a href="{{ path('org_show', { 'id': child.Id }) }}">show</a>
                    </li>
                    <li>
                        <a href="{{ path('org_edit', { 'id': child.Id }) }}">edit</a>
                    </li>
                </ul>
                </td>
            </tr>
            {% endfor %}
        {% endfor %}
        </tbody>
    </table>

        <ul>
        <li>
            <a href="{{ path('org_new') }}">
                Create a new entry
            </a>
        </li>
    </ul>
    {% endblock %}

stackoverflow.com/questions/8326482/twig-how-to-render-a-tree — DarkBee
– DarkBee, Commented Aug 17, 2015 at 16:59

dsh · Accepted Answer · 2015-08-17 18:47:54Z

1

Fairly easy. You could just {{ include }} the template file for each node. Something like this:

Node.html.twig

<tr>
    <td><a href="{{ path('org_show', { 'id': entity.Id }) }}">{{ entity.Name }}</a></td>
   <td>{{ entity.ParentId }}</td>
    <td>{{ entity.Id }}</td>
    <td>
        <ul>
            <li>
                <a href="{{ path('org_show', { 'id': entity.Id }) }}">show</a>
            </li>
            <li>
                <a href="{{ path('org_edit', { 'id': entity.Id }) }}">edit</a>
            </li>
        </ul>
    </td>
</tr>

{# Recursively print all children nodes #}
{% for child in entity.children %}
    {{ include("Node.html.twig", {'entity': child}) }}
{% endfor %}

And then in your main template:

{% for entity in entities %}
    {{ include("Node.html.twig", {'entity': entity}) }}
{% endfor %}

This is just a rough example, but you can probably see the idea behind it. It would be smart to think about possible recursion depths. The deeper you go, the greater the chance of overflowing the stack.

Hope this helps...

edited Aug 17, 2015 at 18:47

dsh

12.3k3 gold badges37 silver badges53 bronze badges

answered Aug 17, 2015 at 16:32

Jovan Perovic

20.2k5 gold badges47 silver badges92 bronze badges

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

3 Comments

shayster01 Over a year ago

Key "children" for array with keys "145, 153" does not exist in src/Company/MyBundle/Resources/views/Org/node.html.twig at line 20 It looks like it is having issues with parents without parentid. These two have a parentid=null. @Jovan

shayster01 Over a year ago

I added {% if entities.children is defined %} around it and got rid of the error but it only returns the top two entries.

shayster01 Over a year ago

In the node.html.twi change the recursive function from {% for child in entities.children %} to {% for child in entity.children %}

Collectives™ on Stack Overflow

How to iterate through an array of arrays in Twig

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related