title: Access every Flask array elements and Display to html with JavaScript
body: <p>I'm a beginner in python and flask, so i want to ask on how can i access the flask array, increments its array index and display it in html by using JavaScript. I managed to access only one of its array and display it but i failed in incrementing its index to access each of its element. Below is part of my code :</p>
  
  <p>Python/Flask</p>
  
  <pre><code>@app.route('/Table',methods=['GET', 'POST'])
  def showtable():
  incr1=0
  incr2=0
  
  form = InputForm2(request.form)
  session['stemp'] = form.istemp.data
  stemp = session['stemp']
  session['etemp'] = form.ietemp.data
  etemp = session['etemp']
  session['stp1'] = form.istp1.data
  stp1 = session['stp1']
  
  session['spress'] = form.ispress.data
  spress = session['spress']
  session['epress'] = form.iepress.data
  epress = session['epress']
  session['stp2'] = form.istp2.data
  stp2 = session['stp2']
  
  incr1 = (etemp - stemp) / stp1
  incr2 = (epress - spress) / stp2
  
  tps = np.arange(stemp,etemp,incr1)
  
  
  for i in range(0,len(tps)):
      tps[i] = tps[i].tolist()
  
  i=0
  
  return render_template('table.html',stemp=stemp,etemp=etemp,incr1=incr1,stp1=stp1,spress=spress,epress=epress,incr2=incr2,
                         tps=tps,i=i)
  </code></pre>
  
  <p>HTML/JavaScript</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;link rel="icon" href="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAAfJAAAAJDIxMDc1NWExLTczODgtNDBhOS1iZmYwLWRmOTZjZjc2NzVhYQ.png"&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="http://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.css"&gt;
      &lt;!--&lt;link rel="stylesheet" type="text/css" href="http://handsontable.com/static/css/main.css"&gt;--&gt;
      &lt;script src="http://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.js"&gt;&lt;/script&gt;
  
      &lt;title&gt;Invigour Tool&lt;/title&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;!-- Custom styles for this template --&gt;
      &lt;!--&lt;link href="dashboard.css" rel="stylesheet" type="text/css"&gt;--&gt;
      &lt;style&gt;
  
  /* Move down content because we have a fixed navbar that is 50px tall */
  body {
    padding-top: 50px;
  
  }
  
  /*
   * Global add-ons
   */
  
  .sub-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  /*
   * Top navigation
   * Hide default border to remove 1px line.
   */
  .navbar-fixed-top {
    border: 0;
  }
  
  /*
   * Sidebar
   */
  
  /* Hide for mobile, show later */
  .sidebar {
    display: none;
  }
  @media (min-width: 768px) {
    .sidebar {
      position: fixed;
      top: 51px;
      bottom: 0;
      left: 0;
      z-index: 1000;
      display: block;
      padding: 20px;
      overflow-x: hidden;
      overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
      background-color: #f5f5f5;
      border-right: 1px solid #eee;
    }
  }
  
  /* Sidebar navigation */
  .nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
  }
  .nav-sidebar &gt; li &gt; a {
    padding-right: 20px;
    padding-left: 20px;
  }
  .nav-sidebar &gt; .active &gt; a,
  .nav-sidebar &gt; .active &gt; a:hover,
  .nav-sidebar &gt; .active &gt; a:focus {
    color: #fff;
    background-color: #428bca;
  }
  
  /*
   * Main content
   */
  
  .main {
    padding: 20px;
  }
  @media (min-width: 768px) {
    .main {
      padding-right: 40px;
      padding-left: 40px;
    }
  }
  .main .page-header {
    margin-top: 0;
  }
  
  /*
   * Placeholder dashboard ideas
   */
  
  .placeholders {
    margin-bottom: 30px;
    text-align: center;
  }
  .placeholders h4 {
    margin-bottom: 0;
  }
  .placeholder {
    margin-bottom: 20px;
  }
  .placeholder img {
    display: inline-block;
    border-radius: 50%;
  }
  
  /* Custom page footer */
  .footer {
    padding-top: 10px;
    margin-top: 2cm;
    color: #777;
    border-top: 1px solid #e5e5e5;
  
  }
  
  .out{
      float: right;
      box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
      width: 180px;
      height: 85px;
      font-size: 30px;
      border-radius: 24px;
      background-color: limegreen;
      position: relative;
      right: 0.5cm;
      margin-top: 3cm;
  }
  
  .rest{
      float: right;
      box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
      width: 180px;
      height: 85px;
      font-size: 30px;
      border-radius: 24px;
      background-color: limegreen;
      margin-top: 6cm;
      position: relative;
      left: 4.3cm;
  }
  
  input[type="number"]{
      margin-left: 3.7cm;
  }
  
  select[id=cor4]{
      width: 165px;
  }
  
  select{
      margin-left: 1cm;
  }
  
  tr:hover{
      background-color:#f5f5f5}
  
      &lt;/style&gt;
    &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div&gt;
  
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="http://www.invigourenergy.com/"&gt;Invigour Energy&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;&lt;a href="Menu"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="PVT Menu"&gt;PVT Tool&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;form class="navbar-form navbar-right"&gt;
              &lt;input type="text" class="form-control" placeholder="Search..."&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-3 col-md-2 sidebar"&gt;
            &lt;ul class="nav nav-sidebar"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Overview &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#"&gt; &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; &lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav nav-sidebar"&gt;
              &lt;li&gt;&lt;a href=""&gt; &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt; &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt; &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt; &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt; &lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"&gt;
            &lt;form method="POST" class="form" id="fm3"&gt;
                  &lt;h3&gt;Output Data for Basic Input&lt;/h3&gt;
  
                  &lt;div id="example1" class="hot handsontable"&gt;&lt;/div&gt;
                  &lt;script&gt;
                    //alert('{{ (tps[i]) }}');
                    //var xyz = '{{ (tps[0]) }}';
                    //var xxx = parseFloat('{{ (stemp) }}');
                    var yyy = parseFloat('{{ (stp1) }}');
                    //var zzz = parseFloat('{{ (incr1) }}');
                    var i = '{{ (i) }}';
  
                     var
                      data = [
  
                      ],
                      container = document.getElementById('example1'),
                      hot1;
  
                     for( i ; i &lt; yyy; i++) {
                         //alert(i);
                         //alert('{{ (tps[i]) }}');
                         var t = '{{ (tps[i]) }}';
                         data.push(
                             {temp:t, press:999 } );
                          //xyz = '{{ (tps[0 + 1]) }}';
                         for(t;t&lt;yyy;t++)
                            t = '{{ (tps[i+1]) }}'
                      }
  
  
  
                    function isEmptyRow(instance, row) {
                      var rowData = instance.getData()[row];
  
                      for (var i = 0, ilen = rowData.length; i &lt; ilen; i++) {
                        if (rowData[i] !== null) {
                          return false;
                        }
                      }
  
                      return true;
                    }
  
                    function defaultValueRenderer(instance, td, row, col, prop, value, cellProperties) {
                      var args = arguments;
  
                      if (args[5] === null &amp;&amp; isEmptyRow(instance, row)) {
                        td.style.color = '#999';
                      }
                      else {
                        td.style.color = '';
                      }
                      Handsontable.renderers.TextRenderer.apply(this, args);
                    }
  
                    hot1 = new Handsontable(container, {
                      //startRows: 5,
                      //startCols: 99999,
                      minSpareRows: 1,
                      contextMenu: true,
                      width: 1000,
                      height: 500,
                      stretchH: 'all',
                      rowHeaders: true,
                      colHeaders: [
                          'Temperature (◦F)',
                          'Pressure (psia)',
                          'Bubble Point (psia)',
                          'Gas Oil Ratio (scf/STB)',
                          'Oil Density (lb/ft'+'3'.sup()+')',
                          'Oil Viscosity (cP)',
                          'Oil FVF (RB/STB)',
                          'Oil Compressibility (1/psi)',
                          'Gas Density (lb/ft'+'3'.sup()+')',
                          'Gas Viscosity (cP)',
                          'Gas FVF (ft'+'3'.sup()+'/scf)',
                          'Z Factor',
                          'Water Density (lb/ft'+'3'.sup()+')',
                          'Water Viscosity (cP)',
                          'Water FVF (RB/STB)',
                          'Water Compressibility (1/psi)',
                          'Oil/Gas IFT (dyne/cm)',
                          'Oil/Water IFT (dyne/cm)',
                      ],
                      columns: [
                          {
                              data: 'temp',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'press',
                              type: 'numeric',
                              format: '0.00'
                          },
                          {
                              data: 'pb',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'gor',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'po',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'uo',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'bo',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'co',
                              type: 'text'
                              //width: 20
                          },
                          {
                              data: 'pg',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'ug',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'bg',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'zf',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'pw',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'uw',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'bw',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'cw',
                              type: 'text'
                              //width: 20
                          },
                          {
                              data: 'iog',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                          {
                              data: 'iow',
                              type: 'numeric',
                              format: '0.00'
                              //width: 20
                          },
                      ],
                    });
  
                    hot1.loadData(data);
                    function aa()
                    {
  
                    }
  
                  &lt;/script&gt;
  
                  &lt;br/&gt;
                  &lt;footer class="footer"&gt;
                  &lt;p&gt;Copyright © Invigour Energy 2016&lt;/p&gt;
                  &lt;/footer&gt;
              &lt;/form&gt;
  
          &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
  
      &lt;!-- Bootstrap core JavaScript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;window.jQuery || document.write('&lt;script src="../../assets/js/vendor/jquery.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
      &lt;script src="http://getbootstrap.com/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!-- Just to make our placeholder images work. Don't actually copy the next line! --&gt;
      &lt;script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"&gt;&lt;/script&gt;
      &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
      &lt;script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please guide me.Thanks.</p>