如何将变量从 Django 的 render 方法的上下文参数传递给前端的 javascript 脚本？

Question

For context here, I am experienced with JavaScript but new to Django.

Goal: Log the contents of a Django context variable in the browser's console using JavaScript. Specifically I'd like to log the contents of context in the Django render method I write below.

In script.js I have console.log("hey", foo) which I expect to output the contents of a variable I pass into the Django render method. It gives me an error: Uncaught ReferenceError: foo is not defined

I found two StackOverflow threads that seem to answer my question re: how to do this correctly. Neither worked.

In (1) How can I pass my context variables to a javascript file in Django? , the answer from user Brian Neal claims I can deliver the Django variable into a javascript script at the top of the html file Django uses to render the page. Here is how I tried his answer:

Django's render method says...

def page(request):
    bar = "a"
    doohickey = "b"
    context = {'foo': bar,'baz': doohickey}
    return render(request, 'myPage.html',context=context)

Then in myPage.html I say:

{% load static %}
{% block js %}
    <script>var foo = {{ foo|safe }}; console.log("aliens");</script>
    <script src="{% static 'js/script.js' %}" type="text/javascript" defer></script>
{% endblock %}

And script.js says console.log("hey", foo)

But I get the error message written above.

In (2), How to use the context variables passed from Django in javascript? , a similar problem is presented and answered. The ticked answer from user xyres says the same process will (seemingly) work for me.

Both threads say to use double {{ }} tags to pass the django variable to a JavaScript script.

However, I am clearly doing something wrong in myPage.html , because "aliens" does not print to the console. I've been through 8 threads and none of them tell me what to do.

I also found a blog Safely Including Data for JavaScript in a Django Template which claims using the answers I linked to on StackOverflow would create an opportunity for hackers. So I don't want that.

I also found an Edureka page with an answer to the same question I have and did this in myPage.html -- note the tag is now outside of the {% block js %} part:

{% extends "base.html" %}
{% load static %}
<script>var foo = {{ foo|safe }}; console.log("aliens");</script>
{% block js %}
    <script>var foo = {{ foo|safe }}; console.log("aliens");</script>
    <script src="{% static 'js/script.js' %}" type="text/javascript" defer></script>
{% endblock %}
{% block body %}

No change though.

Another update:

When I write context = {"magic": "wizard"} and pass that to the frontend, <script>console.log("aliens"); var something = {{ magic }}; console.log(something);</script> <script>console.log("aliens"); var something = {{ magic }}; console.log(something);</script> <script>console.log("aliens"); var something = {{ magic }}; console.log(something);</script> gives me an error, Uncaught SyntaxError: Unexpected token '&' . Upon investigation, I'm closer than I've ever been to making it work. The code is embedded with bugs: var something = "wizard";

Answer 1

if the django variable is a string, quotes are needed. so it would be like:

var foo = "{{foo}}";