Как отобразить ключи словаря python в виде заголовка таблицы HTML и значения каждого ключа в виде строки под заголовком таблицы?

В настоящее время я работаю над проектом django, в котором я делаю анализ данных с помощью библиотеки pandas и хочу отобразить данные (которые преобразованы в словарь) в виде HTML-таблицы

словарь, который я хочу отобразить:

my_dict = {
    'id': [1, 2, 3, 4, 5],
    'product_name': [product1, product2, product3, product4, product5],
    'value': [200, 400, 600, 800, 1000],
    'available_qty': [1, 2, 3, 2, 4]
}

Я хочу отобразить вышеуказанный словарь в виде этой таблицы в шаблоне django.

id product_name value доступное_количество
1 продукт1 200 1
2 продукт2 400 2
3 продукт3 600 3
4 продукт4 800 2
5 продукт5 1000 4

Я попробовал следующий код.

<table>
    <thead><h2><b>my dictionary</b></h2></thead>
        {% for key, values in my_dict.items %}
            <th><b>{{ key }}</b></th>
            {% for value in values %}   
                <tr>
                    {{value}}
                </tr>   
            {% endfor %}
        {% endfor %}
</table>

Я получаю результаты,

HTML table result

(Между каждой строкой, отображаемой в таблице, есть пробел)

Лучше сначала преобразовать в список строк (используя zip()) и отправить это в шаблон

my_dict = {
    'id': [1, 2, 3, 4, 5],
    'product_name': ['product1', 'product2', 'product3', 'product4', 'product5'],
    'value': [200, 400, 600, 800, 1000],
    'available_qty': [1, 2, 3, 2, 4]
}

all_headers = list(my_dict.keys())

all_rows = list(zip(*my_dict.values()))

print(all_headers)
for row in all_rows:
    print(row)

Результат: 

['id', 'product_name', 'value', 'available_qty']
(1, 'product1', 200, 1)
(2, 'product2', 400, 2)
(3, 'product3', 600, 3)
(4, 'product4', 800, 2)
(5, 'product5', 1000, 4)

И тогда шаблон может быть (но я не проверял это) 

<h2>my dictionary</h2>

<table>

    <thead>
      <tr>
      {% for header in all_headers %}
        <th>{{ header }}</th>
      {% endfor %}
      <tr>
    </thead>
    
    <tbody>
      {% for row in all_rows %}
      <tr>
         {% for value in row %}   
            <td>{{ value }}</td>   
         {% endfor %}
      <tr>
      {% endfor %}
    </tbody>
    
</table>

EDIT:

Если вы используете pandas, то вы можете использовать df.to_html() для создания таблицы 

import pandas as pd

df = pd.DataFrame(my_dict)

html_table = df.to_html(index=False)

print(html_table)

и это дает HTML, похожий на код из моего предыдущего шаблона

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th>id</th>
      <th>product_name</th>
      <th>value</th>
      <th>available_qty</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>product1</td>
      <td>200</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>product2</td>
      <td>400</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>product3</td>
      <td>600</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>product4</td>
      <td>800</td>
      <td>2</td>
    </tr>
    <tr>
      <td>5</td>
      <td>product5</td>
      <td>1000</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

И вы можете послать html_table в шаблон и вы должны отобразить его с опцией safe (так он не будет преобразовывать < > в &lg;, &gt;) 

{{ html_table | safe }}

Ваш шаблон

  • Загрузка фильтров
{% load filter %}
{% block body %}
    <table class="table table-hover">
        <thead>
            <tr>
                {% for key in my_dict %}
                    <th scope="col">{{ key }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for i in my_dict|RANGE %}
                <tr>
                    {% for key, value in my_dict.items %}
                        {% if forloop.counter0 < my_dict|length %}
                            <td>{{ value|items:i }}</td>
                        {% endif %}
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

В project/app/ создайте папку templatetags

  • В вашей папке templatetags будут находиться
    • init.py
    • filters.py
  • вставьте следующий код в filters.py
from django import template

register = template.Library()


@register.filter
def RANGE(dictionary):
    length = 0
    for key, value in dictionary.items():
        if length < len(value):
            length = len(value)
    return list(range(length))


@register.filter
def items(List, index):
    return List[index]
Вернуться на верх