title: Pass JSON to JS using Django render
body: <p>In my views.py file, I have the following dictionary: </p>
  
  <pre><code>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&amp;amp;what=Canvas%7cOil+paintings&amp;amp;ao=on&amp;amp;ft=*&amp;amp;offset=0&amp;amp;rpp=100&amp;amp;pos=1', 'url': 'annotatie01.io.tudelft.nl/collections/Metropolitan/1980.24.jpg', 'title': 'Gooseberries ', 'object_number': '1980.24', 'width': '35.7', 'artist': 'Joseph Decker '}}
  </code></pre>
  
  <p>I wish to be able to use/access this dictionary on my webpage. </p>
  
  <p><strong>My attempts:</strong></p>
  
  <p>I tried to send data using the render in my views.py,</p>
  
  <pre><code>def foo():
      context = {'data':data}
      return render(request, 'index.html', context=context)
  </code></pre>
  
  <p>to access it using:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var received_data  = "{{data}}";
  &lt;/script&gt;
  </code></pre>
  
  <p>Using this, data is transmitted, but it's garbled:</p>
  
  <pre><code>"{&amp;#39;pk&amp;#39;: &amp;#39;1980.24&amp;#39;, &amp;#39;model&amp;#39;: &amp;#39;artworks.metaData&amp;#39;, &amp;#39;fields&amp;#39;: {&amp;#39;medium&amp;#39;: &amp;#39;Oil on canvas &amp;#39;, &amp;#39;descripti...etc
  </code></pre>
  
  <p>I tried using <code>json.dumps(data)</code> and <code>JSON.parse(received_data )</code> but this raised an error:</p>
  
  <pre><code> Uncaught SyntaxError: Unexpected token &amp; in JSON at position 1.
  </code></pre>
  
  <p><strong>In short</strong>:</p>
  
  <p>How can I send JSON data from Py to JS using Django Render()?</p>