I have a variable

rating=[
    {"display_name":"Support","rating":4},
    {"display_name":"Support","rating":5},
    {"display_name":"Support","rating":0},
    {"display_name":"testuser2","rating":0}
]

I need to print these data in an HTML table using loop.

For each display name , average rating should calculate, For example, Support rating should be (4 5 0)/2=4.5. testuser2, rating should be 0

What I have tried is:

<table width="100%">
    <thead>
        <tr>
            <th class="billing" width="20%">User Name</th>
            <th class="billing" width="5%">Average Rating</th>

        </tr>
    </thead>

    <tbody>
        {% if(rating.count() > 0) %}
        {% for tran in rating%}
        <tr>
        <td>{{tran.display_name}}</td>

        <td>
            {% if tran.rating > 0%}
            {% set sumrate=0 %}
            {% set n=0 %}
            {% for rate in rating %}
              {% set sumrate=sumrate rate.rating %}
               {% set n=n 1 %}

            {% endfor %}
            {% endif %}
            {% set avg=sumrate /n %}
            {% if(avg<1 and avg>0)  %}

            <i class="fa fa-star-half-o checked"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            {% endif %}

            {% if(avg==1)  %}

            <i class="fa fa-star checked"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            {% endif %}
            {% if(avg<2 and avg>1)  %}

            <i class="fa fa-star checked"></i>
            <i class="fa fa-star-half-o checked"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            {% endif %}
            {% if(avg==2)  %}

            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked"></i>
            <i class="fa fa-star "></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            {% endif %}
            {% if(avg<3 and avg>2)  %}

            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked"></i>
            <i class="fa fa-star-half-o checked "></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            {% endif %}
            {% if(avg==3)  %}

            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            {% endif %}

            {% if(avg<4 and avg>3)  %}

            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked"></i>
            <i class="fa fa-star-half-o checked"></i>
            <i class="fa fa-star"></i>
            {% endif %}
            {% if(avg==4)  %}

            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked "></i>
            <i class="fa fa-star"></i>
            {% endif %}

            {% if(avg<5 and avg>4)  %}

            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked "></i>
            <i class="fa fa-star-half-o checked"></i>
            {% endif %}
            {% if(avg==5)  %}

            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked"></i>
            <i class="fa fa-star checked "></i>
            <i class="fa fa-star checked"></i>
            {% endif %}
            {{avg}}
            {% endfor %}
        </td>
        </tr>
        {% else %}
            <tr><td colspan="4"> No listings yet. </td></tr>
        {% endif %}

    </tbody>
</table>

What my output shows

Output

My required output should be:

How to get my required output?

CodePudding user response：

You have to create a 2nd loop which groups the values based on the display name in order to solve this in twig

{% set votes  = [
    {"display_name":"Support","rating":4},
    {"display_name":"Support","rating":5},
    {"display_name":"Support","rating":0},
    {"display_name":"testuser2","rating":0}
] %}

{% set grouped_values = {} %}

{% for vote in votes %}
    {% if vote > 0 %}
       {% set key = vote.display_name %} 
       {% set grouped_values = grouped_values|merge({ (key) : (grouped_values[key]|default([])|merge([vote.rating,])),}) %}
    {% endif %}
{% endfor %}

Then you can use this new array to build the table

<table width="100%">
    <thead>
        <tr>
            <th class="billing" width="20%">User Name</th>
            <th class="billing" width="5%">Average Rating</th>

        </tr>
    </thead>

    <tbody>
    {% if grouped_values|default([]) %}
        {% for key, votes in grouped_values %}
            {% set sum = 0 %}
            {% for vote in votes %}{% set sum = sum   vote %}{% endfor %}
            {% set avg = votes ? (sum / votes|length) : 0 %}
            <tr>
                <td>{{ key }}</td>
                <td>
                    {% if avg-1 > -1 %}
                        {% for i in 0..avg-1 %}
                            <i class="fa fa-star checked"></i>
                        {% endfor %}
                    {% endif %}
    
                    {% if 5-avg-1 > -1 %}
                        {% for i in 0..(5-avg-1) %}
                            <i class="fa fa-star"></i>
                        {% endfor %}
                    {% endif %}
                
                    {{ avg }}
                </td>
            </tr>
        {% endfor %}
    {% else %}
        <tr><td colspan="4"> No listings yet. </td></tr>
    {% endif %}
    </tbody>
</table>

demo

sidenote

Consider grouping and calculating the averages in your controller rather than inside your template(s)