使用烧瓶和本地 JSON 文件在 HTML 中显示 JSON答案

【问题标题】：Displaying JSON in the HTML using flask and local JSON file使用烧瓶和本地 JSON 文件在 HTML 中显示 JSON
【发布时间】：2020-11-04 10:28:42
【问题描述】：

我使用 Python 烧瓶、HTML 和本地 JSON 文件以在 HTML 中显示来自本地 JSON 文件的 JSON 数据。一旦烧瓶读取了本地 JSON 文件，它就会通过 jsonify 发送到 index.html。之后，使用该数据我想显示信息。

我可以在烧瓶端显示 JSON 数据，但在 HTML 中显示它时遇到了困难。你能告诉我我错过了什么吗？

烧瓶代码


import os
from flask import Flask, render_template, abort, url_for, json, jsonify
import json
import html

app = Flask(__name__)

# read file
with open('./data/file.json', 'r') as myfile:
    data = myfile.read()

@app.route("/")
def index():
    return render_template('index.html', title="page", jsonfile=jsonify(data))

app.run(host='localhost', debug=True)

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />
    <title>House</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
      crossorigin="anonymous"
    />
    <script>
      var jsonfile ={{jsonfile}};
    </script>
  </head>
  <body>
    <div class="container">
    {{jsonfile}}
  </div>
  </body>
</html>

【问题讨论】：

您是否尝试使用 javascript 在您的本地 html 文件中解析本地 json 文件？如果我理解正确。如果您正在尝试创建一个 api 从您的网站获取 json 文件的信息，请通知我们。
@Filip 是的。我尝试使用 JavaScript 解析本地 HTML 文件中的本地 JSON 文件。

标签： python flask

【解决方案1】：

您的问题是使用jsonify 方法。如果您阅读jsonify 的documentation，它将返回一个响应对象而不是字符串。所以你会得到类似jsonify(data)的东西

<Response 2347 bytes [200 OK]>

您可以删除jsonify 并改用json.dumps，如下所示：

@app.route("/")
def index():
    return render_template('index.html', title="page", jsonfile=json.dumps(data))

这对我有用。

【讨论】：

谢谢@Rahul P，但我如何从这段代码中检索特定值？喜欢这里的“类型”或“properties.community”。

【解决方案2】：

Rahul P 是正确的，您得到意外结果的原因是因为您在应该使用 json.dumps(data) 时使用了 jsonify。

如果您想使用脚本标签内的 json，我可以建议进行以下更改吗？

app.py

import os
from flask import Flask, render_template, abort, url_for
import json
import html

app = Flask(__name__)

# read file
with open('./data/file.json', 'r') as myfile:
    data = myfile.read()

@app.route("/")
def index():
    return render_template('index.html', title="page", jsonfile=json.dumps(data))

if __name__ == '__main__':
    app.run(host='localhost', debug=True)

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />
    <title>House</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
      crossorigin="anonymous"
    />
    
  </head>
  <body>
    <div class="container"></div>
    <script>
      const jsonfile = JSON.parse({{jsonfile|tojson}});
      console.log(jsonfile);
      document.querySelector(".container").innerHTML = JSON.stringify(jsonfile, null, 2);
    </script>
  </body>
</html>

【讨论】：

在尝试您的建议时，我收到类似“TypeError: Object of type Response is not JSON serializable”的消息
@Flames 那是因为返回一个 Response 实例，并且由于错误状态它不是 json 可序列化的。为了使我的建议起作用，您仍然必须遵循 Rahul 的建议并改用 json.dumps(data)。