Passing objects from Django to Javascript DOM

Question

I\'m trying to pass a Query Set from Django to a template with javascript.

I\'ve tried different approaches to solve this:

1. Normal Approach - Javas

Answer 1

NOTE for django 2.1

i found this a little confusing on django documentation so simply explaining a little bit easy way.

we would normally use this like

{{ my_info }}

or loop over it depending on what we needed. But if we use the following filter,

json_script 

we can safely output this value as JSON

{{ my_info|json_script:"my-info" }}

Our data has been added as JSON, wrapped in a script tag, and we can see the data. We can now use this value by looking it up in JavaScript like so:

info = JSON.parse(document.getElementById('my-info').textContent);