Passing django variables to javascript

Question

I'm having a difficult time passing variables from the python backend to javascript. A lot of my variables look like this in javascript:

if ('{{ user.has_paid_plan}}' == 'True') {
    isPayingUser = true;
} else {
    isPayingUser = false;
}

It's ugly and I'm sure there's a much cleaner way to do this. How should this be done?

Answer 1

<input type='hidden' value='{{ user.has_paid_plan}}' id='has_paid_plan' />


if ($('#has_paid_plan').val() == 'True') {
    isPayingUser = true;
} else {
    isPayingUser = false;
}

Answer 2

This may be an odd approach, but I suppose one way to solve this would be to pass a json object as a variable, which would contain all other variables. For example:

def user(request):
    user = request.user

    ctx = {
      'isPayingUser': user.is_paying_user()
      'age': user.age
      'username': user.email
    }

    json_ctx = json.dumps(ctx)
    ctx['json_ctx'] = json_ctx

    return render(request, 'template.html', ctx)

In this way you have access to all the django/python variables, and you also have all the variables properly json-encoded as the "json_ctx" object which you can use in your javascript.

Answer 3

Let's keep things simple. You don't have to use any other response type like JSON or anything else. The first thing that you do is pass the value from the backend. Assuming User model has a field as "has_paid_plan" as a BooleanField. If not please convert the same to a BooleanField.

views.py

context = dict()
context['user'] = user_instance
return render(request, 'template.html', context)

template.html

Add this to your script.

<script>
   .... // other code
    {% if user.has_paid_plan %}
        isPayingUser = true;
    {% else %}
        isPayingUser = false;
    {% endif %}
</script>

Try to keep things simple. It's a good practice. Hope this helps.

Answer 4

another solution:

<script>
const isAuthenticated = ${str(user.is_authenticated).lower()}
</script>