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

Question

为什么在python中，我可以使用下面的python示例打印JSON，但是在django模板中，它不起作用？我怎样才能在django模板中打印JSON？

蟒：

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)

模板：

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

Answer 1

如果您只想保留缩进，可以使用

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

如果必须使用django模板，您可以使用Klaus建议的HTML <pre>标记。 所以你的模板变成了

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

Answer 2

为什么不只使用pprint过滤器？

视图

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

模板

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

Screnshot

或者，如果您想要更好的东西，请创建一个自定义过滤器

templatetags/extras.py

import json

from django import template

register = template.Library()


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

模板

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

Answer 3

它不起作用的原因是因为它呈现为HTML，它根据你放入的标签处理不同的间距。最好的办法是使用语法高亮库。它们通常很容易设置。其中有许多，例如highlight.js，prism以及许多等等。

我忘了提及用于语法高亮的Pythonic库Pygments！

Answer 4

我必须结合使用答案才能获得所需的信息。我需要的缺少的东西是过滤器linebreaks

所以在我的views.py中，我有一个功能

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

以及在我的Django模板中

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

我的json字符串中有一堆\n，因此通过删除这些字符串（可能是mongoengine对象引起），使它看起来很漂亮