Displaying dictionary in html from django render

Question

I am trying to display some data (which is outputted from django view as a dictionary) into a html collapseable div (from bootstrap3).

For example i get the object "data" into my template which has the following structure:

group value
-----------
A      1
A      2
A      3
B      1
B      2

I know I can iterate through the object easily. For example

{% for i in data %}
{{i.group}}

However, what I want to do is to be able to use the "group" as the parent within the collapseable and the items as the "values". Something like

{% for i in data %}
<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
            <a data-toggle="collapse" href="#{{ i.group }}">{{ i.group }}</a>
            </h4>
            </div>
            <div id="{{ i.group }}" class="panel-collapse collapse">
                <ul class="list-group" style="margin-left:30px">
                <div class="row">
                    <li class="list-group-item">{{ i.value }}</li>
                </div>
                </ul>
            </div>
        </div>
    </div> 
{% endfor %}
</div>

As you can see the issue is that if i do it as the way above, it will create multiple parent catergories for the non-unique "group" values.

Answer 1

First, we groupby the data by group before sending it to the template:

from itertools import groupby
grouped = groupby(data, key=lambda _: _.group)

Then we modify the template slightly to iterate for groups and values:

{% for group, values in grouped %}
<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
            <a data-toggle="collapse" href="#{{ group }}">{{ group }}</a>
            </h4>
            </div>
            <div id="{{ group }}" class="panel-collapse collapse">
                <ul class="list-group" style="margin-left:30px">
                {% for i in values %}
                    <div class="row">
                        <li class="list-group-item">{{ i.value }}</li>
                    </div>
                {% endfor %}
                </ul>
            </div>
        </div>
    </div> 
{% endfor %}
</div>

In each iteration, group will be distinct and values is an iterator with the original data corresponding to each distinct group.

This will create single tags for each group, and individual entries for each of the values inside each group.

Answer 2

Thanks @Tomas Farias. Use a similar approach as you mentioned. First i created a dictionary and then i found out that django has a builtin function called .items in the templates to separate key:value pairs

For others who may be stuck heres an example: Lets say your views.py passes a dictionary

data = {'A':[1,2,3], 'B':[4,5,6]}
render(request, 'templates/your_template.html', 'data':data}

Then you can access the dictionary in "your_template.html" by using .items.

{% for key,value in data.items %}
   {{ key }}
   {{ value }}