Question

我正在尝试将Flask中的JSON文件显示到我的HTML页面中。

烧瓶

@app.route("/analysis")
def analysis():
    data = pd.read_csv('static/uploads/' + global_file.filename)
    temp_json = data.to_json(orient='records')
    json_df = json.loads(temp_json)
    list = json_df
    return render_template('results.html', summary = json.dumps(list))

HTML

<div class="results">
    <table>
        {% for key in summary %}
            {{ key.Name }}
        {% endfor %}
    </table>
  </div>

JSON

Name    Age Class   Marks
A       12     6    32
B       13     6    32
C       14     6    43
D       12     6    54
E       13     6    23

我的空白页面是ouptut。我想在页面上将它显示为漂亮的表格。

Answer 1

我认为你可以先将值转换为字典，然后循环表：

@app.route("/analysis")
def analysis():
    data = pd.read_csv('static/uploads/' + global_file.filename)
    temp_dict = data.to_dict(orient='records')
    return render_template('results.html', summary = temp_dict)

<table>
  {% for value in summary %}
    <tr>
         <td> {{ value['Name'] }} </td>
         <td> {{ value['Age'] }} </td>
         <td> {{ value['Class'] }} </td>
         <td> {{ value['Marks'] }} </td>     
    </tr>
  {%  endfor %}
</table>

Answer 2

发生这种情况的原因是您使用json.dumps将json对象转换为字符串然后迭代遍历字符串（逐个字符）并尝试访问Name属性。如果你遗漏了.Name，你确实会看到每个角色都是在彼此之后打印出来的。

要解决此问题，您应该为模板提供实际对象：list dicts。像这样：

@app.route("/analysis")
def analysis():
    data = pd.read_csv('static/uploads/' + global_file.filename)
    temp_json = data.to_json(orient='records')
    json_df = json.loads(temp_json)
    return render_template('results.html', summary = json_df)

然后仍然不会成为真正的桌子，因为在您的模板中没有tr或td元素。如果你解决了这个问题：

<div class="results">
     <table>
         {% for item in summary %}
             <tr><td>
             {{ item['Name'] }}
             </td></tr>
         {% endfor %}
     </table>
</div>

您将看到一张实际的表格。

编辑：您的analyze方法内部的转换也有点多余，但是您可能缩短了代码以便在此发布？

在Flask Bootstrap页面上渲染JSON输出

2 个答案: