Django模板遍历API返回结果渲染表格单字符占行问题如何解决

问题原因 #

• 你没有将API返回的JSON字符串解析为Python字典就直接传给了模板，遍历字符串时每次取到的就是单个字符，因此出现每行单字符的问题
• 就算你已经解析成了字典，直接遍历整个API返回的结构只能拿到外层的error、result两个键，也无法获取到币种对应数据，同时原模板每行只写了一个<td>，就算数据正确也只能展示一列，不符合需求。

解决步骤 #

1. 后端视图代码修改（views.py） #

首先需要把API返回的JSON字符串解析为Python字典，取出币种数据部分再传给模板，示例代码如下：

import json
# 以下为你的视图逻辑
def coin_view(request):
    # 假设你已经通过API请求拿到了返回的JSON字符串，存在api_raw_str变量里
    api_raw_str = '你的API返回的原始JSON字符串'
    api_data = json.loads(api_raw_str)
    # 仅取出币种对应的result字典传递给模板
    return render(request, "你的模板文件名.html", {"coin_data": api_data["result"]})

2. 模板代码修改 #

遍历字典的items属性同时获取键（币种名）和值（对应数值），补全第二列的<td>标签：

<table class="table table-hover table-bordered">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Amount</th>
    </tr>
  </thead>
  <tbody>
    {% for coin_name, coin_amount in coin_data.items %}
    <tr>
      <td>{{ coin_name }}</td>
      <td>{{ coin_amount }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

注意Django模板中调用字典的items方法不需要加括号，直接写.items即可。

如果你不想修改后端传参逻辑，已经将解析后的完整API字典以api_reply为变量名传给了模板，也可以直接修改模板循环逻辑，把循环行改成{% for coin_name, coin_amount in api_reply.result.items %}即可。

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