Django：将 JSON 从视图传递到模板答案

【问题标题】：Django: passing JSON from view to templateDjango：将 JSON 从视图传递到模板
【发布时间】：2015-09-18 00:21:16
【问题描述】：

在views.py 中，我将时间序列数据存储在字典中，如下所示：

time_series = {"timestamp1": occurrences, "timestamp2": occurrences}

其中每个timestamp 都是unix 时间，occurrences 是一个整数。

有没有办法在render函数的上下文中将时间序列数据作为json对象传递？

为什么这样做：我在前端使用Cal-heatmap，它要求数据为json格式。 Ajax 请求目前工作得很好，但如果可能的话，我最好使用render 方法。

【问题讨论】：

从 2021 年开始使用简单的内置解决方案进行更新：stackoverflow.com/a/66658209/4671300

标签： javascript json django django-1.7 cal-heatmap

【解决方案1】：

如果前端库需要解析 JSON，您可以使用 json 库将 python dict 转换为 JSON 有效字符串。使用escapejs 过滤器

import json

def foo(request):
    json_string = json.dumps(<time_series>)
    render(request, "foo.html", {'time_series_json_string': json_string})


<script>
    var jsonObject = JSON.parse('{{ time_series_json_string | escapejs }}');
</script>

【讨论】：

var jsonObject = {{ time_series_json_string }}; 怎么样？如果您确定您的数据不能包含 unicode 转义或 </script 字符串。
@spectras 确实，在这个特定问题的背景下很好。以防万一这篇文章被解释为不同的有效载荷，我猜：P
@Yuji'Tomita'Tomita 这很好用！一般来说，有什么理由选择这种方法而不是 ajax 请求方法，反之亦然？
@JayKarimi 只是因为这个问题专门要求render 方法。不使用 ajax 的原因是：显然这不一定是动态内容。如果没有必要，为什么要添加 AJAX JS / 回调、ajax 视图 + 模板渲染。如果有任何 AJAX 会导致 2 键对象的渲染速度变慢和额外复杂性。或者可能不是：页面可以更容易地被整页缓存，而 AJAX 被更频繁地缓存。一切都取决于！
如果你的json有用户提交的内容，这个方法安全吗？

【解决方案2】：

将json.dumps 值传递给模板。它已经是一个有效的 JSON 字符串，所以你不需要解析它或任何东西。只有在模板中渲染时，标记为safe，以防止HTML引用。

# views.py
def foo(request):
    time_series_json = json.dumps(time_series)
    return render(request, 
                  "template.html", 
                  context={'time_series': time_series_json})

# in the template
<script>
    const timeSeries = {{ time_series | safe }};
</script>

【讨论】：

这并非完全正确。 JSON 字符串旨在呈现在字符串内部，而不是像数组或映射这样的通用 JSON 对象。例如，如果您使用您的方法渲染地图，它将被破坏，因为它会使用反斜杠渲染所有键和值，以转义它的引号以在字符串中使用。这可能适用于仅包含数字的数组，因为它们不需要任何转义，但这是一个小众案例。

【解决方案3】：

您是否尝试过将 json.dumps(time_series) 之类的内容传递给渲染函数？

【讨论】：

【解决方案4】：

使用Django templates built-in filter json_script：

在views.py:

render(request, "foo.html", {'time_series_data': time_series})

在模板foo.html:

{{ time_series_data|json_script:"time-series-data" }}

在您的脚本中：

const timeSeriesData = JSON.parse(document.getElementById('time-series-data').textContent);

【讨论】：