Displaying JSON in the HTML using flask and local JSON file

python flask

11,686

Solution 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.

Solution 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>

11,686

CalgaryFlames

Keep calm and love programming.

Updated on June 04, 2022

Comments

CalgaryFlames almost 2 years

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>

Filip almost 4 years

Are you trying to get a parse a local json file in your also local html file with javascript? If I understand correctly. If you are trying to create an api to get the information of a json file from your website please inform us.
CalgaryFlames almost 4 years

@Filip Yes. I try to parse a local JSON file in the local HTML file using JavaScript.

CalgaryFlames almost 4 years

When trying your suggestion, I got the message like this 'TypeError: Object of type Response is not JSON serializable'
CalgaryFlames almost 4 years

Thank you @Rahul P, but how do I retrieve the specific value from this code? Like '"type" or "properties.community" here.
Steffen Andersland almost 4 years

@Flames That's because returns a Response instance and as there error states it is not json serializable. For my suggestion to work you still have to follow Rahul's suggestion and use json.dumps(data) instead as well.