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, ...})

作为一种调试方式，在模板的HTML部分使用{{ tags }}将其作为输出（对于长行抱歉）：

[{"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数组的正确格式。

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

{% 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源代码。

所以之后：

var tagbs = {{ tags|safe }};

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

所以你应该能够做到

var tagbs = {{ tags|safe }};
alert(tagbs[0].fields.ParentVideoFile);

那应该显示“4”。

Answer 2

您希望JSON-ify模板中的数据 ; JSON确实已经是Javascript（它是一个子集：

{% if tags %}
  var tgs = {{ tags }};
{% endif %}

请注意，tags已经是JSON（因此是JavaScript）数据，可以直接插入 ;无需转义（此处没有HTML，而是JavaScript）。

或者您可以使用此Django snippet并直接在模板中执行此操作（无需在serializers.serialize方法中调用annotate）：

var tgs = {{ tags|jsonify }};

Answer 3

您还可以使用simplejson中的django.utils。像：

oldAnnotations = lastFrame.videoannotation_set.filter(ParentVideoLabel=label)
dump = simplejson.dumps(oldAnnotations)

return HttpResponse(dump, mimetype='application/json')

您可以从JS方面解析并覆盖此处的所有数据。

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

3 个答案: