在 Flask Bootstrap 页面上渲染 JSON 输出答案

【问题标题】：Rendering JSON output on Flask Bootstrap Page在 Flask Bootstrap 页面上渲染 JSON 输出
【发布时间】：2017-08-18 10:20:46
【问题描述】：

我正在尝试将 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

我得到空白页作为输出。我想在页面上将其显示为漂亮的表格。

【问题讨论】：

标签： python json twitter-bootstrap pandas flask

【解决方案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>

【讨论】：

【解决方案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>

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

编辑：此外，您的分析方法内部的转换有点多余，但也许您缩短了代码以在此处发布？

【讨论】：