CODEWITHSUNDEEP
javascriptpythonjquerydjangodjango-templates
David542
David542

Reputation: 110492

Passing django variables to javascript

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?

Upvotes: 3

Views: 9806

Answers (4)

Duc Trung Mai
Duc Trung Mai

Reputation: 2598

another solution:

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

Upvotes: -1

Ankit Singh
Ankit Singh

Reputation: 273

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.

Upvotes: 2

David542
David542

Reputation: 110492

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.

Upvotes: 2

daniel
daniel

Reputation: 11

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


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

Upvotes: 1

Related Questions