Python Flask get json data to display

Question

I'm currently trying to display a list of values that get updated every 5 seconds to a sqlite database.

I can manage to convert the results to a JSON format by using the following 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())

Navigating to the webpage through a browser returns

{
  "BoilerRoom": 26.44, 
  "Cylinder1": 56.81, 
  "Cylinder2": 39.75, 
  "Cylinder3": 33.94
}

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

{% extends "layout.html" %}
{% block body %}
<script type=text/javascript>
  $(function() {
    $("#submitBtn").click(function() {
         $.ajax({
            type: "GET",
            url: $SCRIPT_ROOT + "_status",
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                $('#Result').text(data.value);
            }
        });
    });
  });
</script>

<strong><div id='Result'></div></strong>

{% endblock %}

I've picked code from examples but I'm in need of a pointer.

SOLVED!!

New HTML Code

<script type=text/javascript>
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);
</script>

<table id="overview">
    <tr>
        <th>Location</th>
        <th>Temperature</th>
    </tr>
    <tr>
        <td>Cylinder Top</td>
        <td id="Cyl1"></td>
    </tr>
    <tr>
        <td>Cylinder Middle</td>
        <td id="Cyl2"></td>
    </tr>
    <tr>
        <td>Cylinder Bottom</td>
        <td id="Cyl3"></td>
    </tr>
    <tr>
        <td>Boiler Room</td>
        <td id="BRoom"></td>
    </tr>

</table>

Solution

Your AJAX call should auto-detect a JSON response, but it won't hurt to explicitly tell jQuery about it:

$.ajax({
    type: "GET",
    url: $SCRIPT_ROOT + "_status",
    dataType: 'json',
    success: function(data) {
        $('#Result').text(data);
    }
);

The contentType parameter is only used for a POST request, telling the server what type of data you sent.

The data object contains whatever your Flask jsonify() response returned; in this case it'll be a JavaScript Object with the BoilerRoom, etc. keys.

Since you are loading JSON over a GET request, you may as well use the jQuery.getJSON() method here:

$.getJSON(
    $SCRIPT_ROOT + "_status",
    function(data) {
        $('#Result').text(data);
    }
);

This does exactly the same as the $.ajax() call but you get to omit the type and dataType parameters, and the url and success parameters are just positional elements.

Comments

[craigdabbs]

Thankyou very much Martijn, its working very nicely now with auto refresh :).