title: Unable to use Jinja templating to pass variable from Starlette backend to Javascript frontend
body: <p>I am using starlette ASGI framework and want to render an HTML response.</p>
  
  <p>Using a dummy route below to test passing a variable to javascript frontend.</p>
  
  <pre><code>@app.route('/error')
  async def server_error(request):    
      template = 'analyze_response.html'
      context = {"request": request}
      return templates.TemplateResponse(template, context, data=75)
  </code></pre>
  
  <p>This is my 'analyze_response.html' file:</p>
  
  <pre><code>&lt;html lang='en'&gt;
  &lt;head&gt;
      &lt;meta charset='utf-8'&gt;
      &lt;link rel='stylesheet' href='../static/style.css'&gt;
      &lt;script src='../static/client.js'&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="../static/cmGauge.css"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="../static/cmGauge.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var data = {{ data|tojson }}            
      &lt;/script&gt;
      &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;div class='center'&gt;
              &lt;div class='title'&gt;Sentiment Analysis of Movie Reviews&lt;/div&gt;
              &lt;div class='content'&gt;
                  &lt;form action="/analyze" class="form" method="post"&gt;
                      &lt;div class="form-group"&gt;                            
                          &lt;textarea rows = "10" cols = "100" name = "review_text"&gt;&lt;/textarea&gt;&lt;br&gt;
                      &lt;/div&gt; 
                      &lt;div class='analyze'&gt;
                          &lt;input type="submit" class="form-submit-button" value="Analyze"&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;                    
                  &lt;div id="gaugeDemo" class="gauge gauge-big gauge-green"&gt;
                      &lt;div class="gauge-arrow" data-percentage="40"
                          style="transform: rotate(0deg);"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;script type="text/javascript"&gt;
                      $('#gaugeDemo .gauge-arrow').cmGauge();
                      $('#gaugeDemo .gauge-arrow').trigger('updateGauge', myFunc());
                  &lt;/script&gt;                
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>As per some of the <a href="https://stackoverflow.com/questions/37259740/passing-variables-from-flask-to-javascript">answers</a>, I tried everything but it's still not working.</p>
  
  <p>Getting below error:</p>
  
  <blockquote>
    <p>File "app/server.py", line 125, in server_error
        return templates.TemplateResponse(template, context, data=data) TypeError: TemplateResponse() got an unexpected keyword argument
    'data'</p>
  </blockquote>
  
  <p>Can you please let me know what the issue is? Thanks.</p>