Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Python Flask get json data to display

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>
like image 231
craigdabbs Avatar asked Jul 14 '14 11:07

craigdabbs


People also ask

How do I view JSON data in Flask?

There are two methods you can use to return JSON data in your Flask application's view: by returning a Python dictionary, or by using Flask's jsonify() method.

How get JSON data from GET request in Python?

To request JSON from a URL using Python, you need to send an HTTP GET request to the server and provide the Accept: application/json request header with your request. The Accept header tells the server that our Python client is expecting JSON.


1 Answers

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.

like image 185
Martijn Pieters Avatar answered Oct 20 '22 00:10

Martijn Pieters