Calling jsonify on a variable for use in an html file renders incorrectly
<p>Is there any way to store "jsonify" in a variable? I dislike the pure json format of doing "return jsonify(data)" but I like the indentation so I'm trying to pretty it up using a rendered HTML template. Here is my python code:</p>

<pre><code>from flask import Flask, jsonify, render_template
app = Flask(__name__)

@app.route("/")
def return_json():
    data = {"One": 1, "Two": 2, "Three": 3, "Letters": ['a', 'b', 'c']}
    html_item = jsonify(data)
    return render_template("file.html", html_item=html_item)

if __name__ == "__main__":
    app.run()
</code></pre>

<p>Here is my (at this point very basic) HTML file (file.html):</p>

<pre><code>&lt;html&gt;
{{ html_item }}
&lt;/html&gt;
</code></pre>

<p>And here is the output I get on my browser at <a href="http://127.0.0.1:5000/" rel="nofollow">http://127.0.0.1:5000/</a></p>

<pre><code>&lt;Response 92 bytes [200 OK]&gt; 
</code></pre>

<p>If there isn't a way to store jsonify in a variable, does any one know how I display "data" in a pretty way on the browser? All I can figure out is (1) jsonify and (2) "return data" which is the same as jsonify just without the indentation.</p>

<p><code>jsonify()</code> produces a <em>response object</em>, one that <em>contains</em> the JSON data. From the <a href="http://flask.pocoo.org/docs/0.11/api/#flask.json.jsonify" rel="nofollow"><code>flask.json.jsonify()</code> documentation</a>:</p>

<blockquote>
  <p>This function wraps <code>dumps()</code> to add a few enhancements that make life easier. <strong>It turns the JSON output into a <code>Response</code> object with the <code>application/json</code> mimetype.</strong></p>
</blockquote>

<p>Bold emphasis mine. This is very useful when your route is supposed to produce JSON as the final result, not all that useful when you wanted to use the JSON data in a template.</p>

<p>You'd use <a href="http://flask.pocoo.org/docs/0.11/api/#flask.json.dumps" rel="nofollow"><code>flask.json.dumps()</code></a> directly instead:</p>

<pre><code>from flask import json

@app.route("/")
def return_json():
    data = {"One": 1, "Two": 2, "Three": 3, "Letters": [a, b, c]}
    html_item = json.dumps(data, indent=2, separators=(', ', ': '))
    return render_template("file.html", html_item=html_item)
</code></pre>

<p>The <code>indent</code> and <code>separators</code> arguments are what <code>flask.json.jsonify()</code> uses when <code>JSONIFY_PRETTYPRINT_REGULAR</code> is enabled (the default) and this is not an AJAX request.</p>

<p>Alternatively, turn the data to JSON <em>in the template</em>, with the <a href="http://flask.pocoo.org/docs/0.11/templating/#standard-filters" rel="nofollow"><code>tojson</code> filter</a>:</p>

<pre class="lang-html prettyprint-override"><code>&lt;html&gt;
{{ data|tojson|safe }}
&lt;/html&gt;
</code></pre>

<p>This assumes that <code>data</code> was passed into the template rather than the <code>html_item</code> JSON string. Also note the use of the <code>safe</code> filter there; this makes sure you get the unescaped JSON data you could load with JavaScript code, not an HTML-escaped version.</p>

<p>You can pass in the same configuration to that filter:</p>

<pre class="lang-html prettyprint-override"><code>&lt;html&gt;
{{ data|tojson(indent=2, separators=(', ', ': '))|safe }}
&lt;/html&gt;
</code></pre>

python html json flask