Displaying JSON in the HTML using flask and local JSON file

问题

I work with the Python flask, HTML, and local JSON file to display the JSON data from a local JSON file in the HTML. Once the flask reads a local JSON file, it is sent to index.html with jsonify. After then, using that data I want to display the information.

I can the JSON data in the flask side, but have struggled with displaying it in the HTML. Could you let me know what I missed?

flask code


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>

回答1:

Your issue is the use of the jsonify method. If you read the documentation of jsonify it returns a Response object and not a string. So you will get something like this for jsonify(data)

<Response 2347 bytes [200 OK]>

You could remove jsonify and use json.dumps instead, as follows:

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

This works for me.

回答2:

What Rahul P is correct and the reason you are getting unexpected results is because you are using jsonify when you should be using json.dumps(data).

If you want you want to use the json inside of the script tag can I suggest making the following changes?

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>

来源：https://stackoverflow.com/questions/62906140/displaying-json-in-the-html-using-flask-and-local-json-file

标签

python

Flask