如何将 python 字典的键显示为 HTML table header 并将每个键的值显示为 table header 下的一行？

Question

我目前在一个 django 项目中工作，在该项目中，我使用 pandas 库进行了一些数据分析，并希望将数据（已转换为字典）显示为 HTML table.

我要显示的词典：

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 模板中像这样显示上面的字典 table。

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

我试过下面的代码。

<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>

我得到的结果是，

(table中显示的每一行之间有一些space)

Answer 1

最好先转换为行列表（使用 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>

---

编辑：

如果你使用 pandas 那么你可以使用 df.to_html() 生成 table

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 显示它（因此它不会将 < > 转换为 ≶, >)

{{ html_table | safe }}

Answer 2

在您的模板中

• 加载过滤器

{% 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]