Question

我正在通过json文件在Flask中创建一个HTML表。这是我的json文件：

{
 "data1": {
  "key1": 49371,
  "key2": 699
 },
 "data2": {
  "key1": 890,
  "key2": 6536
 }
}

我在render_template中传递了json

@app.route('/')
def index():
    jsonFile = open("Stats.json", "r")  # Open the JSON file for reading
    data = json.load(jsonFile)  # Read the JSON into the buffer
    jsonFile.close()  # Close the JSON file
    return render_template('index.html', data= data)

所以我如何像烧瓶中的jinja2那样创建表行

<tbody>
        <tr>
          <td>Data1</td>
          <td>key1</td>
          <td>key2</td>
        </tr>
        <tr>
          <td>Data2</td>
          <td>key1</td>
          <td>key2</td>
        </tr>
<tbody>

先谢谢了。这是我的第一个问题。抱歉，如果我有任何错误：）

Answer 1

字典不按照列表的顺序排列。如果要按顺序排列行，请考虑使用类似

的格式

[
    {
        "key": "data1",
        "field1": 49371,
        "field2": 699
    },
    {
        "key": "data2",
        "field1": 890,
        "field2": 6536
    }
]

然后，您可以使用简单的模板，例如

<table>
{% for row in data %}
    <tr>
        <td>{{ row.key }}</td>
        <td>{{ row.field1 }}</td>
        <td>{{ row.field2 }}</td>
    </tr>
{% endfor %}
</table>

Answer 2

<table>
    <tr>
        <th>Data</th>
        <th>Key 1</th>
        <th>Key 2</th>
    </tr>
{% for i in data %}
    <tr>
        <td>{{ i.key }}</td>
        <td>{{ i.field1 }}</td>
        <td>{{ i.field2 }}</td>
    </tr>
{% endfor %}
</table>

用于json文件的jinja2中的for循环

2 个答案: