2

我使用 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)

索引.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>
4

2 回答 2

6

您的问题是该jsonify方法的使用。如果您阅读它的文档，jsonify它会返回一个 Response 对象而不是一个字符串。所以你会得到这样的东西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))

这对我有用。

于 2020-07-15T01:56:20.550 回答
3

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

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

应用程序.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)

索引.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>
于 2020-07-15T02:12:56.387 回答