如何从 django 模板在 html 页面上打印漂亮的 JSON？

Question

Why is it that in python, I can pretty print JSON with the python example below, but in a django template, it doesn't work? How can I pretty print JSON in a django template?

python:

import requests, json
url = 'https://api.example.com/details'
r = requests.get(url)
json_data = r.json()
json_pretty = json.dumps(json_data, sort_keys=True, indent=4)
print (json_pretty)

django views.py:

def json_list(request):
    url = 'https://api.example.com/details'
    r = requests.get(url)
    json_data = r.json()
    json_pretty = json.dumps(json_data, sort_keys=True, indent=4)

    context = {
        "json_pretty": json_pretty,
        }
    return render(request, "json_output.html", context)

template:

<div>{{ json_pretty }}</div>

Answer 1

Why not just use the pprint filter ?

view

context["my_json"] = {i: i for i in range(100)}

template

<pre>{{ my_json }}</pre>
vs    
<pre>{{ my_json | pprint }}</pre>

Screnshot

Or if you want something even better, create a custom filter

templatetags/extras.py

import json

from django import template

register = template.Library()


@register.filter
def pretty_json(value):
    return json.dumps(value, indent=4)

template

{% load extras %}
<pre>{{ my_json | pretty_json }}</pre>

Answer 2

If you just want to keep your indent, You can use

return HttpResponse(json_pretty,content_type="application/json")

If it is a must to use django template, you can use the HTML <pre> tag as suggested by Klaus. So your template becomes

<pre>{{ json_pretty }}</pre>

Answer 3

The reason it doesn't pretty up is because it renders to HTML, which handles spacing different depending on the tags you put it in. Your best bet would be to use a syntax highlighting library. They are usually simple to set up. There are many of them, like highlight.js , prism and many, many more.

I forgot to mention the Pythonic library for syntax highlighting, Pygments !

Answer 4

I had to use a combination of answers to get what I needed. The missing thing I needed was the filter linebreaks

So in my views.py I have a function

def foobar(request, test_id):
    json_response = json.dumps(example_dict, indent=3)
    return render(request, 'foo/bar.html', {"json_string": json_response})

and in my django template

<pre>{{ json_response | linebreaks }}</pre>

My json string had a bunch of \\n in it so this made it look nice by removing those (might be caused by mongoengine objects)