This question must be obvious but I can't figure it out.
In a template, I link to a js file in my media directory. From that file, I would like to access a context variable like {{my_chart}}.
But is the syntax different?? Thank you!!
Add a comment
|
4 Answers
In addition to Andrzej Bobak's answer, you can also generate a global variable in Javascript from your template. For example, your template might generate code like this:
<script>
var my_chart = {{ the_chart }};
</script>
Your script could then refer to my_chart.
5 Comments
YPCrumble
@Brian_Neal how does this work? I.e., you can just do something like
console.log(my_chart); in the javascript file, and you don't have to declare it anywhere?
Brian Neal
@YPCrumble It's declared in the html that is generated by Django. If that same html file also includes an external javascript file, that javascript can refer to that variable.
almost a beginner
This is brilliant answer, as long as you declare the global variable before you import your js file, you should be fine. Thanks.
Ryan McGrath
This is unsafe if {{ the_chart }} has any user entered values. What if a user decides to enter "<>/:'\;" ?
Brian Neal
@RyanMcGrath I haven't done Django in a long time but I believe there was/is a filter to escape javascript so maybe
{{ the_chart|escapejs }}.I don't think it's possible this way. If you want to access some data provided by the view, you have to pass it to the js function.
Example
js file:
my_cool_js_function(some_param){
// do some cool stuff
}
view
// some html code
my_cool_js_function({{param}})
hope this helps :)
1 Comment
dani herrera
Remember to take a look to {{ value|escapejs }}
I would also add because I ran into the error a few times that if the python variable is an object it will throw a syntax error unless you put it in quotes, in other words, within your template,
<script>
var my_var = '{{ python_object|escapejs }}';
</script>
Furthermore, before putting that object in the context it is best to first serialize it to JSON, or you'll end up having to do string parsing. I found also that date objects needed to be converted to strings before this step.
import jsonpickle
context['python_object'] = jsonpickle.encode(python_object)
And finally, in the JS you can then iterate through the object properly and use the values as you probably would have in python by doing:
var my_var_parsed = jQuery.parseJSON(my_var);
Comments
There is now a more secure way to pass context to a javascript file using the built-in template tag json_script with an argument which would be the id set for the created element.
Use case would be:
{{ mydata|json_script:"mydata" }}
Then link your javascript file:
<script src="{% static 'myjavascriptfile.js' %}"></script>
the script tag would have to come after the template tag i'm guessing
Which can then be accessed in your javascript file like:
const mydata = JSON.parse(document.getElementById('mydata').textContent);
Sources
1 Comment
Florian
Updated blog post: adamj.eu/tech/2022/10/06/…