2017-06-29 61 views
4

在我的views.py文件,我的字典:通JSON到JS使用Django渲染

data = {'pk': '1980.24', 'model': 'artworks.metaData', 'fields': {'medium': 'Oil on canvas ', 'description': 'missing', 'credit': 'Gift of Nicholas Wyeth, 1980 ', 'collection': 2, 'height': '21.7', 'culture': 'Missing value', 'depictedPeople': 'missing', 'creation_date': '1896 ', 'account': 'n/a', 'original_url': 'http://www.metmuseum.org/art/collection/search/10738?sortBy=Relevance&what=Canvas%7cOil+paintings&ao=on&ft=*&offset=0&rpp=100&pos=1', 'url': 'annotatie01.io.tudelft.nl/collections/Metropolitan/1980.24.jpg', 'title': 'Gooseberries ', 'object_number': '1980.24', 'width': '35.7', 'artist': 'Joseph Decker '}} 

我希望能夠用我的網頁/上網本字典。

我嘗試:

我試圖用我的views.py渲染髮送數據,

def foo(): 
    ctx = {'data':data} 
    return render(request, 'imageView/index.html', context=ctx) 

用來訪問它:

<script type="text/javascript"> 
    var received_data = "{{data}}"; 
</script> 

利用這一點,數據被傳送,但它是亂碼:

"{&#39;pk&#39;: &#39;1980.24&#39;, &#39;model&#39;: &#39;artworks.metaData&#39;, &#39;fields&#39;: {&#39;medium&#39;: &#39;Oil on canvas &#39;, &#39;descripti...etc 

我嘗試使用json.dumps(data)JSON.parse(received_data)但這引發的錯誤:

Uncaught SyntaxError: Unexpected token & in JSON at position 1. 

總之

如何從PY發送JSON數據使用Django渲染()到JS?

回答

5

最簡單的方法將是

<script type="text/javascript"> 
    var received_data = "{{ data|safe }}"; 
</script> 
+0

|的功能是什麼?運營商?一個名字可以,所以我尋找文檔。 –

+0

它不是一個名字兄弟。嘗試尋找Django模板過濾器,你會發現你可以在管道符號|之後使用過濾器與變量 – Exprator

1

技巧是你的字典轉換爲字符串Django的1.5+做:

import json 

def foo(): 
    js_data = json.dumps(data) 
    render_template_to_response("imageView/index.html", {"data": js_data}) 

imageView/index.html保持:

<script type="text/javascript"> 
    var received_data = "{{data|safe}}"; 
    console.log(received_data); 
</script> 

代勞:

from django.utils import simplejson 

def foo(): 
    js_data = simplejson.dumps(data) 
    render_template_to_response("imageView/index.html", {"data": js_data}) 

imageView/index.html保留:

<script type="text/javascript"> 
    var received_data = "{{data}}"; 
    console.log(received_data); 
</script> 
+0

好像simplejson被Django的V1.5後取出。應該添加我自己的版本號。 –