CODEWITHSUNDEEP
pythonjinja2starlette
Nikhil Utane
Nikhil Utane

Reputation: 1221

Unable to use Jinja templating to pass variable from Starlette backend to Javascript frontend

I am using starlette ASGI framework and want to render an HTML response.

Using a dummy route below to test passing a variable to javascript frontend.

@app.route('/error')
async def server_error(request):    
    template = 'analyze_response.html'
    context = {"request": request}
    return templates.TemplateResponse(template, context, data=75)

This is my 'analyze_response.html' file:

<html lang='en'>
<head>
    <meta charset='utf-8'>
    <link rel='stylesheet' href='../static/style.css'>
    <script src='../static/client.js'></script>
    <link rel="stylesheet" href="../static/cmGauge.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="../static/cmGauge.js"></script>
    <script type="text/javascript">
        var data = {{ data|tojson }}            
    </script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div>
        <div class='center'>
            <div class='title'>Sentiment Analysis of Movie Reviews</div>
            <div class='content'>
                <form action="/analyze" class="form" method="post">
                    <div class="form-group">                            
                        <textarea rows = "10" cols = "100" name = "review_text"></textarea><br>
                    </div> 
                    <div class='analyze'>
                        <input type="submit" class="form-submit-button" value="Analyze">
                    </div>
                </form>                    
                <div id="gaugeDemo" class="gauge gauge-big gauge-green">
                    <div class="gauge-arrow" data-percentage="40"
                        style="transform: rotate(0deg);"></div>
                </div>
                <script type="text/javascript">
                    $('#gaugeDemo .gauge-arrow').cmGauge();
                    $('#gaugeDemo .gauge-arrow').trigger('updateGauge', myFunc());
                </script>                
            </div>
        </div>
    </div>
</body>

As per some of the answers, I tried everything but it's still not working.

Getting below error:

File "app/server.py", line 125, in server_error return templates.TemplateResponse(template, context, data=data) TypeError: TemplateResponse() got an unexpected keyword argument 'data'

Can you please let me know what the issue is? Thanks.

Upvotes: 2

Views: 5507

Answers (1)

drec4s
drec4s

Reputation: 8077

You need to pass it inside the context variable:

@app.route('/error')
async def server_error(request):    
    template = 'analyze_response.html'
    context = {'request': request, 'data': 75}
    return templates.TemplateResponse(template, context)

Upvotes: 6

Related Questions