Returning JSON array from a Django view to a template

by

Edit with update for Django 2.1+ and the modern web:

The modern way to do this is:

1) Pass the raw data to the template, not the JSON-serialised data. I.e.:

def annotate(request, ...):
    ...
    oldAnnotations = lastFrame.videoannotation_set.filter(ParentVideoLabel=label)
    ...
    return render_to_response('vannotate.html', {'tags': oldAnnotations, ...})

2) In your template, use the new “json_script” filter to include the JSON data:

{{ tags|json_script:"tags-data" }}

That will result in HTML that looks like this:

<script id="tags-data" type="application/json">{"foo": "bar"}</script>

This tag has special handling of strings containing “</script>” to make sure they work.

3) In your Javascript code, get that tags data like this:

var tags = JSON.parse(document.getElementById('tags-data').textContent);

4) Move your Javascript code to an external .js file, and set up the Content-Security-Policy header to prohibit inline Javascript because it’s a security risk. Note that since the json_script tag generates JSON, not Javascript, it’s safe and is allowed regardless of your Content-Security-Policy setting.

Original Answer:

WARNING: If any of the strings are user-controlled, this is insecure

JSON is Javascript source code. I.e. the JSON representation of an array is the Javascript source code you need to define the array.

So after:

var tagbs = {{ tags|safe }};

tagbs is a JavaScript array containing the data you want. There’s no need to call JSON.parse(), because the web browser already parsed it as JavaScript source code.

So you should be able to do 

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

and that should show “4”.

WARNING: With this old method, strings containing “</script>” will not work, they will go horribly wrong. This is because the browser will treat </script> as the end of the script. If any of the strings are user-entered data, this is an exploitable security flaw – see comment 14 here for more details. Use the more modern method above, instead.

More Related Contents:

  1. Passing data from Django to D3
  2. Django Template Variables and Javascript
  3. JSON datetime between Python and JavaScript
  4. How to convert raw javascript object to a dictionary?
  5. Django csrf token + Angularjs
  6. Passing Python Data to JavaScript via Django
  7. Convert string array to array in javascript
  8. Django authentication and Ajax – URLs that require login
  9. How to use the variables from “views.py” in JavasScript, “” in Django Template?
  10. sending data as JSON object from Python to Javascript with Jinja [duplicate]
  11. Django: passing JSON from view to template
  12. How Can i Change the style of my angularjs object?
  13. authentification with angular js
  14. Loading local JSON file
  15. Unexpected token colon JSON after jQuery.ajax#get
  16. How to stringify event object?
  17. Get JSON data from external URL and display it in a div as plain text
  18. Parsing JSON from XmlHttpRequest.responseJSON
  19. D3 – how to deal with JSON data structures?
  20. Error “Uncaught SyntaxError: Unexpected token with JSON.parse”
  21. JSON stringify a Set
  22. Solve Cross Origin Resource Sharing with Flask
  23. How to find an appropriate object in array by one of its properties
  24. How to find horizon line efficiently in a high-altitude photo?
  25. Convert js Array() to JSon object for use with JQuery .ajax
  26. How to create json by JavaScript for loop?
  27. Retrieving a property of a JSON object by index?
  28. How to send parameter json array when modal open?
  29. Cannot Upload File to FastAPI backend using JavaScript Fetch API in the frontend
  30. How to return an array from an AJAX call?

Leave a Comment