Displaying JSON in the HTML using flask and local JSON file

Question

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>

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. — Filip
– Filip, Commented Jul 15, 2020 at 1:18
@Filip Yes. I try to parse a local JSON file in the local HTML file using JavaScript. — CalgaryFlames
– CalgaryFlames, Commented Jul 15, 2020 at 1:40

Rahul P · Accepted Answer · 2020-07-15 01:56:20Z

9

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.

answered Jul 15, 2020 at 1:56

Rahul P

2,7032 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CalgaryFlames Over a year ago

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

Steffen Andersland · Accepted Answer · 2020-07-15 03:34:03Z

3

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>

edited Jul 15, 2020 at 3:34

answered Jul 15, 2020 at 2:12

Steffen Andersland

6296 silver badges8 bronze badges

2 Comments

CalgaryFlames Over a year ago

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

Steffen Andersland Over a year ago

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

Collectives™ on Stack Overflow

Displaying JSON in the HTML using flask and local JSON file

2 Answers 2

1 Comment

app.py

index.html

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

app.py

index.html

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related