How can I compare a Javascript Variable with Jinja2 variable

Question

I am having a pyramid based jinja2 website. I want to compare the jinja2 variable with a js variable stored in the window object, any suggestions on how I can achieve this?

{% for summary in dashboard_dict.summaries %}
<div class="summary-list">
    <div class="w-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-bag"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
    </div>
    <div class="w-summary-details">
        <div class="w-summary-info">
            <h6>{{summary.label}}</h6>
            <p class="summary-count" id="accordato-count">{{summary.value}}</p>
        </div>
        <div class="w-summary-stats">
            <div class="progress">
                <div class="progress-bar bg-gradient-secondary" role="progressbar" style="width: {{summary.value}}%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

I am trying to compare the summary.label with window.variable

jmunsch · Answer 1 · 2020-06-30T21:59:43.460

From what I understand of how jinja works, what I have done in the past in ( flask, django ) is to pass window.variable along with the GET/PUT/POST request, and then process it in the view, and then pass it to the template render, at which point you'll be able to do the comparison.

an example with pyramid:

from pyramid.view import view_config

@view_config(renderer='templates/summary-list.jinja2')
def dashboard(request):
    # adding window_variable to dashboard_dict
    return {"window_variable": request.params.get('theVariable', 'default')

Example get request:

const url = new URL("http://127.0.0.1:8000/dashboard")
const url params = {theVariable: window.variable}
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
const resp = await fetch(url)

Another possibility is to pass the request into jinja ( it might be done by default already, as part of the pyramid-jinja standard context ) or possibly you can try to do it manually:

from pyramid.view import view_config

@view_config(renderer='templates/summary-list.jinja2')
def dashboard(request):
    # adding request to dashboard_dict
    return {"request": request}

Example usage in jinja template:

<div>method 1:</div>
<h1>{{window_variable == summary.label}}</h1>

<div>method 2:</div>
<h1>{{request.params.get('theVariable', 'default') == summary.label}}</h1>

referenced:

This is quite a lengthy process for my use-case. Thanks for the efforts btw, great answer! — Aniruddh Agarwal, Jun 30 '20 at 16:38
The answer is correct... jinja executes on the server and javascript executes in the client's browser. If you want to compare, then you have to get the jinja variable into javascript, and then it can be compared. The simplest way is to just modify the template to drop the value into a script tag, instead of coding up a separate ajax endpoint. For example `` then in javascript access `window.foo`. — Michael Merickel, Jun 30 '20 at 17:30

How can I compare a Javascript Variable with Jinja2 variable

1 Answers1