JSON配列をDjangoビューからテンプレートに戻す

Question

私はプロジェクト用のWebベースのアプリケーションを作成するためにDjangoを使用していますが、Djangoビューからテンプレートに配列を返す問題が発生しています。

この配列は、JavaScript（JQuery）スクリプトがページに表示されているイメージ上にボックスを描画するために使用されます。したがって、この配列は、とりわけ、描画されるボックスの座標を持ちます。

これは、必要なデータを取得し、JSONとしてそれをシリアル化するために使用さDjangoのビュー内のコードです：デバッグの方法として

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の配列です。 WebブラウザがすでにJavaScriptのソースコードとして解析しているため、JSON.parse（）を呼び出す必要はありません。

だから、

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

を行うことができる必要があり、それは "4" を示す必要があります。

Answer 2

のデータをJSON-ifyにする場合; JSONはJavascriptが実際に（それは一部だすでにある：tagsはすでにJSON（したがって、JavaScriptの）データであり、直接を挿入することができる

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

注;エスケープする必要はありません（ないHTMLがここにありません、それは代わりにJavaScriptのです。）

それとも、まっすぐテンプレート（annotate方法でserializers.serializeをコールする必要はありません）で、このDjango snippetを使用して、それを行うことができます：

var tgs = {{ tags|jsonify }}; 

Answer 3

simplejsonをdjango.utilsから使用することもできます。 Like：

JSの側からすべてのデータを解析してアクセスできます。