Перебор списка объектов JSON с помощью HTML-тегов/шаблона Django

Контекст

Я хочу позволить пользователям агрегировать DF и создавать несколько таблиц, передавая список JSON объектов.

Данные выборки

Person_ID      hair_color      eye_color      gender
111            Brown           Brown          M
222            Blonde          Brown          M
333            Brown           Green          F
444            Brown           Blue           M

Текущий код

 views.py
'function code to read in excel and create DF goes here'
'pull in the sample data and create a dataframe based on count of hair / eye color'
 df_list = []
 for trait in person_list:  <-- ['hair_color', 'eye_color']
     var_df = df.groupby([trait]).size().reset_index(name='counts')
     data = var_df.to_json(orient='records')
     data = json.loads(data)
     df_list.append(var_df)
 context = {'d': df_list}

 return render(request, 'URL_test', context)
 DF_LIST looks like:
[
[{'hair_color': 'Brown', 'gender': M, 'counts': 2}, {'hair_color': 'Blonde', 'gender': 'M', 'counts': 1}, {'hair_color': 'Brown', 'gender': 'F', 'counts': 1}], 
[{'eye_color': 'Brown', 'gender': 'M', 'counts': 2}, {'eye_color': 'Green', 'gender': 'F', 'counts': 1}, {'eye_color': 'Blue', 'gender': 'M', 'counts': 1}]
]

HTML Template Code:
<body>
<center>
{% if d %}
{% for i in d %}   <----- for each JSON object in DF_LIST
<div class="container">
    <table class="altrowstable" id="alternatecolor">
        <thead>
        <tr>
            <th align=left>VAR NAME GOES HERE</th>    <--- dynamic based on i
            <th align=left>GENDER GOES HERE</th>
            <th align=right>COUNT</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td align=left>{{i.variable}}</td>
            <td align=right>{{i.gender}}</td>
            <td align=right>{{i.counts}}</td>
        </tr>
        </tbody>
    </table>
</div>
{% endfor %}
{% endif %}

ОЖИДАЕМЫЙ РЕЗУЛЬТАТ

Я хочу, чтобы в теле веб-страницы были созданы две таблицы, которые выглядят примерно так:

hair_color      gender     count 
brown           M          2
blonde          M          1
brown           F          1

eye_color      gender     count
brown          m          2
green          f          1
blue           m          1 

Проблема

Когда я использую {{ i }} в качестве передаваемой переменной, он просто помещает весь объект JSON (что имеет смысл) в ячейку. Я могу получить доступ к индексу i, используя {{ i.0.eye_color }}, но я не уверен, как сделать цикл и сделать это для всех строк в этом JSON

При циклическом просмотре словаря можно использовать dictionary.items. При необходимости вы можете перебирать как ключи, так и значения, как в обычном python. Например, {% for i,j in d.items %}

Я также изменил местоположение цикла for, потому что с кодом, который вы опубликовали, вы бы выводили строку заголовка каждый раз, что я не думаю, что это желаемый результат.

<div class="container">
    <table class="altrowstable" id="alternatecolor">
        <thead>
        <tr>
            <th align=left>VAR NAME GOES HERE</th>    <--- dynamic based on i
            <th align=left>GENDER GOES HERE</th>
            <th align=right>COUNT</th>
        </tr>
        </thead>
        <tbody>
        {% for i in d.items %} 
            <tr>
                <td align=left>{{i.variable}}</td>
                <td align=right>{{i.gender}}</td>
                <td align=right>{{i.counts}}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

Вернуться на верх