dextervip dextervip - 1 month ago 6
Twig Question

How to render data equally into 3 column list using Twig?

I have array contains cities and I would like to put them on the 3 column list. How can I render an array of cities spliting them equally into 3 column list?

My html list:

<div class="col-md-4">
<ul>
<li class="city-item"><a href="#">City</a></li>
<li class="city-item"><a href="#">City</a></li>
<li class="city-item"><a href="#">City</a></li>
<li class="city-item"><a href="#">City</a></li>
...
</ul>
</div>
<div class="col-md-4">
<ul>
<li class="city-item"><a href="#">City</a></li>
<li class="city-item"><a href="#">City</a></li>
<li class="city-item"><a href="#">City</a></li>
<li class="city-item"><a href="#">City</a></li>
...
</ul>
</div>
<div class="col-md-4">
<ul>
<li class="city-item"><a href="#">City</a></li>
<li class="city-item"><a href="#">City</a></li>
<li class="city-item"><a href="#">City</a></li>
<li class="city-item"><a href="#">City</a></li>
<li class="city-item"><a href="#">City</a></li>
...
</ul>
</div>


I am expecting the data to appear in this order

city0 city3 city6
city1 city4 city7
city2 city5


What's the best approach to render data like it?

Answer

Update 1: I have created a Twig Fiddle to incorporate suggestions in the comments. http://twigfiddle.com/0h54xy

Update 2: If you have a newer version of Twig, it might be better to use the batch filter. See http://twigfiddle.com/0h54xy/5 for an example.


This is where the modulus operator % is very useful.

The // operator in Twig will divide a number and floor it, i.e. 20 // 3 == 2

Note that Twig's loop.index is not zero-indexed, the first value is 1.

{% if cities|length  %}
    {% set citiesPerColumn = (cities|length / 3)|round(0, 'ceil') %}

    {% for city in cities %}

        {% if citiesPerColumn == 1 or loop.index % citiesPerColumn == 1 %}
            <div class="col-md-4">
                <ul>
        {% endif %}

                    <li class="city-item"><a href="#">{{ city }}</a></li>

        {% if loop.last or loop.index % citiesPerColumn == 0 %}
                </ul>
            </div>
        {% endif %}

    {% endfor %}
{% endif %}
Comments