Process JSON reply from flask server in javascript and display the returned value in HTML

Question

I have seen similar posts (which is how i have arrived at this current implementation) however i cannot get the below code to work. I want to:

Receive input from the user (badge id)
POST to the flask webserver via ajax
process the badge id and send back the result
receive the reply and process via javascript to be outputted via HTML onto the screen.

What is currently happening: 500 error TypeError: 'NoneType' object is not subscriptable.

When i use postman to submit a JSON to flask the reply works perfectly.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>App</title>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="{{ url_for('static', filename='form.js') }}"></script>
</head>
<body>
<div class="container">
    <br><br><br><br>
    <form class="form-inline">
      <div class="form-group">
        <input type="text" class="form-control" id="badge" name ="badgeinput" placeholder="Badge Scan..">
        <button type="submit" class="btn btn-default">Submit</button>
        <br>
        <br>
        <div class="container">
            <span name="result" id="result">... </span>
        </div>

    </div>
    </form>
    <br>
</body>
</html>

form.js:

$(document).ready(function() {

        $('form').on('submit', function(event) {

            $.ajax({
                data : {
                    badge_ID: $('input[name="badgeinput"]').val(),
                },
                type : 'POST',
                url : '/process'
            })
            .done(function(data) {
                document.getElementById('#result').innerHTML = data.result;

            });

            event.preventDefault();

        });

    });

Flask:

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/process', methods=['POST'])
def process():

    badge = request.json['badge_ID']
    one = "Test"
    new_badge_id = badge + one
    return jsonify({'badge_ID' : new_badge_id})


if __name__ == '__main__':
    app.run(host="localhost", port=4000, debug=True)

are you sending the form or json? i think it should be request.form.get('badge_ID', None) and please add exception handling so if the badge_ID was None, you are able to throw an error or do whatever you want. check if that fixes your problem and i make it an answer — senaps, Oct 02 '17 at 11:59
request.form.get('badge_ID', None) worked, thank you. The JSON return from the flask server was not null. However i still cannot update the html on the page to display the returned value. — Thrivius, Oct 02 '17 at 13:12

tallberg · Answer 1 · 2017-10-02T11:23:43.877

0

I'd say it's your input that is the problem.
You should have a check if request.json['badge_ID'] has any value.

You could also use developer tools (F12) in your browser to verify that the data you're sending is correct, checking post header in the network tab.

edited Oct 02 '17 at 11:23

answered Oct 02 '17 at 11:17

tallberg

429
3
12

score 0 · Answer 2 · answered Oct 02 '17 at 13:34

You haven't specified your post data-type, so it's better to consider it as being form not JSON. you could set the type to post and be a bit safe about not getting data using :

request.form.get('badge_ID', None)

then, it seems that you have a typo in your jquery.done part.

return jsonify({'badge_ID' : new_badge_id})

since your result is

{"badge_ID": new_badge_id}

you don't have any data.result and you should try data.badge_ID

since in your comment you mentioned that you don't have None badge_ID in your view, so there is a good chance that changing this part in your code would fix it.

PS: i would change your JS code to Jquery like this:

$("#result").html(data.badge_ID);

but your own JS should work just fine.

Worked perfectly, thank you! Side note for others don't forget to disable caching on the chrome dev tools => network to stop your old .js files being loaded instead of your newly updated. — Thrivius, Oct 02 '17 at 16:58

Process JSON reply from flask server in javascript and display the returned value in HTML

2 Answers2