在 Javascript 中获取 Django 视图字典键，但不是将其视为字符串，而是将其视为变量名称

Question

I am doing a project in Django. In my views I send data to the HTML pages with dictionaries. I can easily access that data on HTML, but when I try to access it on Javascript I can't because Javascripts thinks it's a variable name.

For example, I have a log in page. If the credentials are wrong, I send them to the same page and tell them that the username or password are wrong. I want to keep the previously written username on the form, so the person only needs to rewrite the password. I send the username from the view to the Javascript, but I can't access it.

My view code:

def login_form(request):
    assert isinstance(request, HttpRequest)
    if 'username' and 'password' in request.POST:
        user = request.POST['username']
        passw = request.POST['password']

        if rightcredentials(user,passw):
            tparams = {
                'message': 'login successful',
            }
            return render(request, 'about.html', tparams)
        else:
            tparams = {
                'login' : 'failure1',
                'username_info' : user
            }
            return render(request, 'login_form.html', tparams)

Javascript code:

{% if login == 'failure1' %}

    <form action="." method="post">
        {% csrf_token %}
            <div class="program-info">
                <h3 class="program-title">Sign Into Your Account</h3>
                <p>Wrong Username or password</p>
                <div class="form-group">
                    <input type="text" value="" class="form-control" name="username" id="username" placeholder="Username">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" name="password" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-primary">Log In</button>
            </div>
    </form>
    <script type="text/javascript">
        {% autoescape off %}
        var paramvalue = {{ username_info }}
        {% endautoescape %}

        document.getElementById("username").value = paramvalue; 
    </script> 

{%endif%}

After inserting username: 'pedro' and the wrong password on the form I get the following error:

Uncaught ReferenceError: pedro is not defined

Is there a way to access the string username_info or a way to convert the variable name to a string?

Answer 1

Wrapping the {{ }} in quotation marks should do the trick

{% autoescape off %}
var paramvalue = "{{ username_info }}"
{% endautoescape %}