Django模板渲染字典列表为HTML表格时显示空白问题排查

嘿，我帮你找到了导致表格渲染空白的问题！咱们先看你的原始代码，再一步步修正：

你的原始数据与模板代码 #

视图返回的字典列表 #

[{ 'name':'x','age': 20}, {'name': 'y','age': 25 }]

原始模板代码 #

<table class="table table-striped" border="1" class="dataframe">
<thead>
<tr style="text-align: center;">
{% for k, v in results.0.items %}
<th>{{ k }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for x in results %}
<tr style="text-align: center;">
{% for y in x %}
<td> {{ x.y }} </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>

问题根源 #

内层循环{% for y in x %}是在遍历字典的键（也就是name和age），但你用{{ x.y }}时，Django会把y当成一个固定的属性名，而不是循环变量，自然找不到对应的值，所以单元格显示空白。

修正后的模板代码 #

把内层循环的取值方式改成{{ x[y] }}，这样Django会把y作为变量去字典里查找对应的值：

<table class="table table-striped" border="1" class="dataframe">
<thead>
<tr style="text-align: center;">
{% for k, v in results.0.items %}
<th>{{ k }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for x in results %}
<tr style="text-align: center;">
{% for y in x %}
<td> {{ x[y] }} </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>

或者更清晰的方式，直接遍历字典的键值对，可读性更好：

<table class="table table-striped" border="1" class="dataframe">
<thead>
<tr style="text-align: center;">
{% for k, v in results.0.items %}
<th>{{ k }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for item in results %}
<tr style="text-align: center;">
{% for key, value in item.items %}
<td> {{ value }} </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>

这样渲染后就能得到你预期的表格啦！

内容的提问来源于stack exchange，提问作者Deepak