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?
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.
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.
<input type='hidden' value='{{ user.has_paid_plan}}' id='has_paid_plan' />
if ($('#has_paid_plan').val() == 'True') {
isPayingUser = true;
} else {
isPayingUser = false;
}
another solution:
<script>
const isAuthenticated = ${str(user.is_authenticated).lower()}
</script>
var has_paid_plan = {{ user.has_paid_plan }}. Then use that js variable everywhere in rest of your js. This way you can also use these variables in external js files too. Other option is to use data attribute. You can have a data-has_plan in some div or anything. Then you can get its value using js/jQuery. I go with first option when I wil have only one user on a page, if I am showing a list of users, I will go with data attributes{{ user.has_paid_plan }}, I get an error in javascript, because it is literally passed asTrue(string, no quotes).true, or use quotes and check for"True"or"False"var foo = "{{ foo }}";then.