使用Django渲染将JSON传递给JS

Question

在我的views.py文件中，我有字典：

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>

使用它，数据被传输，但它是乱码：

"{'pk': '1980.24', 'model': 'artworks.metaData', 'fields': {'medium': 'Oil on canvas ', 'descripti...etc

我尝试使用json.dumps(data)和JSON.parse(received_data )，但这引发了错误：

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

简而言之：

如何使用Django Render（）将JSON数据从Py发送到JS？

Answer 1

最简单的方法是

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

Answer 2

诀窍是将dict转换为django 1.5+的字符串：

(Get-ChildItem "\\pg-app05\Micros\Scripted Data Extraction\Sales\*.csv" | Select -First 1).FullName | Import-Csv

在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

Answer 3

您应该将 Django {{data}} 传递给原始 JS 字符串，以防止出现 JS 编码/解码问题。

<script type="text/javascript">
    let received_data  = String.raw`{{ data|safe }}`;
</script>