将JSON数组从Django视图返回到模板

Question

我正在使用Django为项目创建一个基于Web的应用程序,我遇到了将数组从Django视图返回到模板的问题.

该数组将由JavaScript(JQuery)脚本用于在页面中显示的图像上绘制框.因此,该数组将具有要绘制的框的坐标等.

这是Django视图中用于获取所需数据并将其序列化为JSON的代码:

def annotate(request, ...):
    ...
    oldAnnotations = lastFrame.videoannotation_set.filter(ParentVideoLabel=label)
    tags = serializers.serialize("json", oldAnnotations)
    ...
    return render_to_response('vannotate.html', {'tags': tags, ...})

作为一种调试方式,{{ tags }}在模板的HTML部分中使用将其作为输出(对于长行而言):

[{"pk": 491, "model": "va.videoannotation", "fields": {"ParentVideoFile": 4, "ParentVideoFrame": 201, "ParentVideoLabel": 4, "top": 220, "height": 30, "width": 30, "ParentVideoSequence": 16, "left": 242}}, {"pk": 492, "model": "va.videoannotation", "fields": {"ParentVideoFile": 4, "ParentVideoFrame": 201, "ParentVideoLabel": 4, "top": 218, "height": 30, "width": 30, "ParentVideoSequence": 16, "left": 307}}]

我假设它是JSON数组的正确格式.

稍后在模板中,我尝试实际使用tags模板的JavaScript部分中的变量,如下所示:

{% if tags %}
  var tagbs = {{ tags|safe }};
  var tgs = JSON.parse(tagbs);
  alert("done");
{% endif %}

如果我删除该var tgs = JSON.parse(tagbs);行,则弹出警报框,其余的JavaScript按预期工作.但是,让这一行破坏了剧本.

我希望能够遍历Django模型中的所有对象并获取JavaScript中的字段值.

我不确定我在这里做错了什么,有人能指出正确的方法吗？

Answer 1

JSON 是 Javascript源代码.即数组的JSON表示是您定义数组所需的Javascript源代码.

之后:

def annotate(request, ...):
    ...
    oldAnnotations = lastFrame.videoannotation_set.filter(ParentVideoLabel=label)
    ...
    return render_to_response('vannotate.html', {'tags': oldAnnotations, ...})

tagbs是一个包含所需数据的JavaScript数组.没有必要调用JSON.parse(),因为Web浏览器已将其解析为JavaScript源代码.

所以你应该能做到

{{ tags|json_script:"tags-data" }}

这应该显示"4".