Pass JSON to JS using Django render

Question

In my views.py file, I have the following dictionary:

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 '}}

I wish to be able to use/access this dictionary on my webpage.

My attempts:

I tried to send data using the render in my views.py,

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

to access it using:

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

Using this, data is transmitted, but it's garbled:

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

I tried using json.dumps(data) and JSON.parse(received_data ) but this raised an error:

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

In short:

How can I send JSON data from Py to JS using Django Render()?

Answer 1

simplest way will be

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

Security warning. json.dumps does not escape forward slashes: an attack is {'</script><script>alert(123);</script>': ''}

Answer 2

The trick is to convert your dict into a string for django 1.5+ do :

import json

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

In imageView/index.html keep:

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

Else do:

from django.utils import simplejson

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

In imageView/index.html keep:

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

Answer 3

You should pass the Django {{data}} to a raw JS String in order to prevent JS encoding/decoding problems.

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