title: Python Flask get json data to display
body: <p>I'm currently trying to display a list of values that get updated every 5 seconds to a sqlite database.</p>
  
  <p>I can manage to convert the results to a JSON format by using the following code:</p>
  
  <pre><code>@app.route('/_status', methods= ['GET',  'POST'])
  def get_temps():
      db = get_db()
      cur = db.execute('select sensor_name, temp from cur_temps ORDER BY sensor_name')
      #cur_temps = cur.fetchall()
      return jsonify(cur.fetchall())
  </code></pre>
  
  <p>Navigating to the webpage through a browser returns </p>
  
  <pre><code>{
    "BoilerRoom": 26.44, 
    "Cylinder1": 56.81, 
    "Cylinder2": 39.75, 
    "Cylinder3": 33.94
  }
  </code></pre>
  
  <p>I would like to have this data updated on a webpage periodically without loading the whole page again.  I'm getting stuck at the first hurdle and cant get the actual data to display.
  The HTML code I'm using is </p>
  
  <pre><code>{% extends "layout.html" %}
  {% block body %}
  &lt;script type=text/javascript&gt;
    $(function() {
      $("#submitBtn").click(function() {
           $.ajax({
              type: "GET",
              url: $SCRIPT_ROOT + "_status",
              contentType: "application/json; charset=utf-8",
              success: function(data) {
                  $('#Result').text(data.value);
              }
          });
      });
    });
  &lt;/script&gt;
  
  &lt;strong&gt;&lt;div id='Result'&gt;&lt;/div&gt;&lt;/strong&gt;
  
  {% endblock %}
  </code></pre>
  
  <p>I've picked code from examples but I'm in need of a pointer.</p>
  
  <p>SOLVED!!</p>
  
  <p>New HTML Code</p>
  
  <pre><code>&lt;script type=text/javascript&gt;
  function get_temps() {
      $.getJSON("_status",
              function (data) {
                  $('#Cyl1').text(data.Cylinder1)
                  $('#Cyl2').text(data.Cylinder2)
                  $('#Cyl3').text(data.Cylinder3)
                  $('#BRoom').text(data.BoilerRoom);
              }
      );
  }
  setInterval('get_temps()', 5000);
  &lt;/script&gt;
  
  &lt;table id="overview"&gt;
      &lt;tr&gt;
          &lt;th&gt;Location&lt;/th&gt;
          &lt;th&gt;Temperature&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Cylinder Top&lt;/td&gt;
          &lt;td id="Cyl1"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Cylinder Middle&lt;/td&gt;
          &lt;td id="Cyl2"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Cylinder Bottom&lt;/td&gt;
          &lt;td id="Cyl3"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Boiler Room&lt;/td&gt;
          &lt;td id="BRoom"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>