title: Displaying JSON in the HTML using flask and local JSON file
body: <p>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 <strong>index.html</strong> with jsonify. After then, using that data I want to display the information.</p>
  <p>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?</p>
  <p><strong>flask code</strong></p>
  <pre><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(&quot;/&quot;)
  def index():
      return render_template('index.html', title=&quot;page&quot;, jsonfile=jsonify(data))
  
  app.run(host='localhost', debug=True)
  
  </code></pre>
  <p><strong>index.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;title&gt;House&lt;/title&gt;
      &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot;
        integrity=&quot;sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7&quot;
        crossorigin=&quot;anonymous&quot;
      /&gt;
      &lt;script&gt;
        var jsonfile ={{jsonfile}};
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
      {{jsonfile}}
    &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>