title: How can I display scraped data in Django Template?
body: <p>I am trying to display the data from a website by scraping it and storing it and passing it to template but not able to show anything.</p>
  <p><img src="https://snag.gy/ztnfLA.jpg" alt="pic1" />
  When a user click on those red button it will scrape the data like ammonium, NO2 etc for that location.</p>
  <p>So far I am able to scrape and show the result in terminal but not able to show it on that table.</p>
  <p><img src="https://snag.gy/xs0Iue.jpg" alt="pic2" /></p>
  <p><strong>views.py</strong></p>
  <pre><code>from django.shortcuts import render, Http404
  from .models import Data,pol
  import urllib
  import time
  from bs4 import BeautifulSoup
  import re
  import urllib.request
  import os
  from django.conf import settings
  import csv
  from django.views.decorators.csrf import csrf_exempt
  @csrf_exempt
  def data(request):
       Am = &quot; &quot;,CO = &quot; &quot;,NO = &quot; &quot;,OZ = &quot; &quot;,SO2 = &quot; &quot;,AT = &quot; &quot;
       PM10 = &quot; &quot;,BE = &quot; &quot;,NO2 = &quot; &quot;, ON = &quot; &quot;, pxy = &quot; &quot;
       TO = &quot; &quot;,BP = &quot; &quot;, PM2_5 = &quot; &quot;,SR = &quot; &quot;
       if request.method == 'POST':
           if 'rowd' in request.POST:
             rowd = request.POST['rowd']         
             station_code = {&quot;av&quot;:&quot;QW5hbmRWaWhhcg==&quot;,&quot;mm&quot;:&quot;TWFuZGlybWFyZw==&quot;,
             &quot;pb&quot;:&quot;UHVuamFiaUJhZ2g=&quot;,&quot;rkPuram&quot;:&quot;UktQdXJhbQ==&quot;,&quot;airpo&quot;:&quot;SUdJ&quot;,
             &quot;civilLines&quot;:&quot;Q2l2aWxsaW5lcw==&quot;}
             result = None
             #while result:
             sc = {&quot;av&quot;:1,&quot;mm&quot;:2,
             &quot;pb&quot;:3,&quot;rkPuram&quot;:4,&quot;airpo&quot;:5,
             &quot;civilLines&quot;:6}
             while(result is None):
                       print(&quot;station&quot;,rowd)
                       url = &quot;http://www.dpccairdata.com/dpccairdata/display/AallStationView5MinData.php?stName={}&quot;.format(station_code[rowd])
  
                       html = urllib.request.urlopen(url).read()
                       soup = BeautifulSoup(html)
                       regex = re.compile('tdcolor.*')
                       td1 = soup.find_all(&quot;tr&quot;, {&quot;class&quot; : regex})
                       #td2 = soup.find_all(&quot;tr&quot;, {&quot;class&quot; : &quot;tdcolor2&quot;})
                       param = [&quot;Ammonia&quot;,&quot;Carbon Monoxide&quot;,&quot;Nitrogen Oxide&quot;,&quot;Ozone&quot;,&quot;Sulphur Dioxide&quot;,&quot;Ambient Temperature&quot;,&quot; Particulate Matter &lt; 10 µg&quot;,&quot;Benzene&quot;,&quot;Nitrogen Dioxide&quot;,&quot;Oxides of Nitrogen&quot;,&quot;p-Xylene&quot;,&quot;Toluene&quot;,&quot;Barometric Pressure&quot;,&quot; Particulate Matter &lt; 2.5 µg&quot;,&quot;Solar Radiation&quot;]
  
                       for i in td1:
                           td_list = i.find_all(&quot;td&quot;)
                           if td_list[0].text in param:
  
                               val = td_list[3].text.split(&quot; &quot;)[0]
                               if param.index(td_list[0].text) == 0:
                                   Ammonia = val
                                   print(&quot;AMMONIA:&quot;,val)
                                   Am = val
                               elif param.index(td_list[0].text) == 1:
                                   Carbon_Monoxide = val
                                   print(&quot;CO:&quot;,val)
                                   CO = val
                               elif param.index(td_list[0].text) == 2:
                                   Nitrogen_Oxide = val
                                   print(&quot;NO:&quot;,val)
                                   NO = val
                               elif param.index(td_list[0].text) == 3:
                                   Ozone = val
                                   print(&quot;OZONE:&quot;,val)
                                   OZ = val
                               elif param.index(td_list[0].text) == 4:
                                   Sulphur_Dioxide = val
                                   print(&quot;SO2:&quot;,val)
                                   SO2 = val
                               elif param.index(td_list[0].text) == 5:
                                   Ambient_Temperature = val
                                   print(&quot;AMBIENT TEMP:&quot;,val)
                                   AT = val
                               elif param.index(td_list[0].text) == 6:
                                   Particulate_Matter_10 = val
                                   print(&quot;PPP10:&quot;,val)
                                   PM10 = val
                               elif param.index(td_list[0].text) == 7:
                                   Benzene = val
                                   print(&quot;BENZENE:&quot;,val)
                                   BE = val
                               elif param.index(td_list[0].text) == 8:
                                   Nitrogen_Dioxide = val
                                   print(&quot;NO2:&quot;,val)
                                   NO2 = val
                               elif param.index(td_list[0].text) == 9:
                                   Oxides_of_Nitrogen = val
                                   print(&quot;ON:&quot;,val)
                                   ON = val
                               elif param.index(td_list[0].text) == 10:
                                   p_Xylene = val
                                   print(&quot;P_XYLENE:&quot;,val)
                                   pxy = val
                               elif param.index(td_list[0].text) == 11:
                                   Toluene = val
                                   print(&quot;TOLUENE:&quot;,val)
                                   TO = val
                               elif param.index(td_list[0].text) == 12:
                                   Barometric_Pressure = val
                                   print(&quot;BAROMETRIC:&quot;,val)
                                   BP = val
                               elif param.index(td_list[0].text) == 13:
                                   Particulate_Matter_2 = val
                                   print(&quot;PPO2:&quot;,val)
                                   PM2_5 = val
                               elif param.index(td_list[0].text) == 14:
                                   Solar_Radiation = val
                                   print(&quot;Solar_rad:&quot;,val)
                                   SR = val
                       
                       #time.sleep(1000)                    
                       result = 1                  
       context =&quot;Ammonia&quot;:Am,&quot;Carbon_Monoxide&quot;:CO,&quot;Nitrogen_Oxide&quot;:NO,&quot;Ozone&quot;:OZ,&quot;Sulphur_Dioxide&quot;:SO2,&quot;Ambient_Temperature&quot;:AT,&quot;Particulate_Matter_10&quot;:PM10          ,&quot;Benzene&quot;:BE,&quot;Nitrogen_Dioxide&quot;:NO2,&quot;Oxides_of_Nitrogen&quot;:ON,&quot;p_Xylene&quot;:pxy,&quot;Toluene&quot;:TO,&quot;Barometric_Pressure&quot;:BP,&quot;Particulate_Matter_2&quot;:PM2_5,&quot;Solar_Radiation&quot;:SR}
       print(context)
       return render(request,&quot;aqp/template.html&quot;,context)   
  </code></pre>
  <p><strong>urls.py</strong></p>
  <pre><code>from django.conf.urls import url
  from django.contrib import admin
  from django.conf import settings
  from django.conf.urls.static import static
  
  admin.autodiscover()
  from aqp import views
  
  urlpatterns = [
      url(r'^admin/', admin.site.urls),
      url(r'^$', views.home, name='home'),
      url(r'^about', views.about, name='about'),
      url(r'^contact', views.contact, name='contact'),
      url(r'^real_time', views.data, name='data'),
      url(r'^stats', views.stat, name='stat'),
  
  ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
  </code></pre>
  <p><strong>template.html</strong></p>
  <pre><code>&lt;style&gt;
  .parent {
    display: inline-block; 
    width: 100%;
  
  }
  .left {
    float: left;
  }
  .right {
    float: left;
    
  }
  
  
  .filterable {
      margin-left:30px;
      margin-top: 0px;
  }
  .filterable .panel-heading .pull-right {
      margin-top: -20px;
  }
  .filterable .filters input[disabled] {
      background-color: transparent;
      border: none;
      cursor: auto;
      box-shadow: none;
      padding: 0;
      height: auto;
  }
  .filterable .filters input[disabled]::-webkit-input-placeholder {
      color: #333;
  }
  .filterable .filters input[disabled]::-moz-placeholder {
      color: #333;
  }
  .filterable .filters input[disabled]:-ms-input-placeholder {
      color: #333;
  }
  
  
  &lt;/style&gt;
  
        &lt;!-- Latest compiled and minified CSS
    --&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css&quot;&gt;
  
  
      &lt;!-- Optional theme
   --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css&quot;&gt;
      &lt;!-- Custom styles for this template --&gt;
      &lt;link href=&quot;http://getbootstrap.com/examples/navbar-static-top/navbar-static-top.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;script&gt;
  
  function get(clicked_id)
  {   var URL = &quot;{% url 'data' %}&quot;;
      var data = {'rowd':clicked_id}
      
      $.post(URL, data, function(response){
  
      });
      
  }
  
  
  &lt;/script&gt;
  
  &lt;html lang=&quot;en&quot;&gt;
  {% include &quot;base.html&quot; %}
  {% load staticfiles %}
  {% block content %}
  &lt;div class=&quot;parent&quot; width=&quot;50px&quot;&gt;  
  &lt;div class=&quot; left &quot;&gt;
  &lt;img src=&quot;{% static &quot;media/map_delhi.jpg&quot; %}&quot; /&gt;
  &lt;div id=&quot;mm&quot; onclick='get(this.id);' style=&quot;position:absolute;cursor:pointer;z-index:2;height:20;width:20;left: 295; top:370;&quot;&gt;&lt;img src=&quot;{% static &quot;media/active.gif&quot; %}&quot; /&gt;&lt;/div&gt;
  &lt;div id=&quot;civilLines&quot; onclick='get(this.id);' style=&quot;position:absolute;cursor:pointer;z-index:2;height:20;width:20;left: 329; top:300;&quot;&gt;&lt;img src=&quot;{% static &quot;media/active.gif&quot; %}&quot; /&gt;&lt;/div&gt;
  &lt;div id=&quot;rkPuram&quot; onclick='get(this.id);' style=&quot;position:absolute;cursor:pointer;z-index:2;height:20;width:20;left: 265; top:480;&quot;&gt;&lt;img src=&quot;{% static &quot;media/active.gif&quot;%}&quot; /&gt;&lt;/div&gt;
  &lt;div id=&quot;pb&quot; onclick='get(this.id);' style=&quot;position:absolute;cursor:pointer;z-index:2;height:20;width:20;left: 175; top:315;&quot;&gt;&lt;img src=&quot;{% static &quot;media/active.gif&quot; %}&quot; /&gt;&lt;/div&gt;
  &lt;div id=&quot;av&quot; onclick='get(this.id);' style=&quot;position:absolute;cursor:pointer;z-index:2;height:20;width:20;left: 465; top:355;&quot;&gt;&lt;img src=&quot;{% static &quot;media/active.gif&quot; %}&quot; /&gt;&lt;/div&gt;
  &lt;div id=&quot;airpo&quot; onclick='get(this.id);' style=&quot;position:absolute;cursor:pointer;z-index:2;height:20;width:20;left: 155; top:497;&quot;&gt;&lt;img src=&quot;{% static &quot;media/active.gif&quot;%}&quot; /&gt;&lt;/div&gt;
  &lt;/div&gt;
    &lt;div class=&quot;right &quot;&gt;
  
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;panel panel-primary filterable&quot;&gt;
              &lt;div class=&quot;panel-heading&quot;&gt;
                  &lt;h3 class=&quot;panel-title&quot;&gt;Air Quality&lt;/h3&gt;
                  &lt;div class=&quot;pull-right&quot;&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;table class=&quot;table&quot;&gt;
                  &lt;thead&gt;
                      &lt;tr class=&quot;filters&quot;&gt;
                          
                          &lt;th&gt;&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Parameters&quot; disabled&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;concentration&quot; disabled&gt;&lt;/th&gt;
                          
                      &lt;/tr&gt;
                  &lt;/thead&gt;
  
                  &lt;tbody&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;Ammonia&lt;/td&gt;
                          &lt;td&gt;{{ Ammonia }}&lt;/td&gt;
                         
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Carbon Monoxide&lt;/td&gt;
                          &lt;td&gt;{{ Carbon_Monoxide }}&lt;/td&gt;
                         
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Nitrogen Oxide&lt;/td&gt;
                          &lt;td&gt;{{ Nitrogen_Oxide }}&lt;/td&gt;
                          
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Ozone&lt;/td&gt;
                          &lt;td&gt;{{ Ozone }}&lt;/td&gt;
                         
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Sulphur Dioxide&lt;/td&gt;
                          &lt;td&gt;{{ Sulphur_Dioxide }}&lt;/td&gt;
                         
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Ambient Temperature&lt;/td&gt;
                          &lt;td&gt;{{ Ambient_Temperature }}&lt;/td&gt;
                          
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Particulate Matter 10&lt;/td&gt;
                          &lt;td&gt;{{ Particulate_Matter_10 }}&lt;/td&gt;
                         
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Benzene&lt;/td&gt;
                          &lt;td&gt;{{ Benzene }}&lt;/td&gt;
                         
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Nitrogen Dioxide&lt;/td&gt;
                          &lt;td&gt;{{ Nitrogen_Dioxide }}&lt;/td&gt;
                          
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Oxides of Nitrogen&lt;/td&gt;
                          &lt;td&gt;{{ Oxides_of_Nitrogen }}&lt;/td&gt;
                         
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;p-Xylene&lt;/td&gt;
                          &lt;td&gt;{{ p_Xylene }}&lt;/td&gt;
                         
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Toluene&lt;/td&gt;
                          &lt;td&gt;{{ Toluene }}&lt;/td&gt;
                          
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Barometric Pressure&lt;/td&gt;
                          &lt;td&gt;{{ Barometric_Pressure }}&lt;/td&gt;
                         
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Particulate Matter 2&lt;/td&gt;
                          &lt;td&gt;{{ Particulate_Matter_2 }}&lt;/td&gt;
                         
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Solar Radiation&lt;/td&gt;
                          &lt;td&gt;{{ Solar_Radiation }}&lt;/td&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>