How to resolve "TypeError: the JSON object must be str, bytes or bytearray, not NoneType" error, while working on a flask app with ajax methods?
Here is my flask app which is using ajax to use html user input data in python script:
templates/index.html:
<html lang="en">
<head>
<title>Data Analytics Ireland</title></head>
<body>
<P>Post some values to a json file</P>
<label for="fname">First name:</label> <input type="text" id="fname" name="fname">
<label for="lname">Last name:</label><input type="text" id="lname" name="lname">
<a href="/test" onclick='myfunction();'>Click Here to see your data</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
function myfunction() {
const firstname = document.getElementById("fname").value;
const lastname = document.getElementById("lname").value;
const dict_values = {firstname, lastname} //Pass the javascript variables to a dictionary.
const s = JSON.stringify(dict_values); // Stringify converts a JavaScript object or value to a JSON string
console.log(s); // Prints the variables to console window, which are in the JSON format
$.ajax({
url:"/test",
type:"POST",
contentType: "application/json",
data: JSON.stringify(s)});
}
</script>
</body>
</html>
main.py
import json
from flask import request
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def index():
return render_template('index.html')
@app.route('/test', methods=['GET', 'POST'])
def test():
output = request.get_json()
print(output) # This is the output that was stored in the JSON within the browser
print(type(output))
result = json.loads(output) #this converts the json output to a python dictionary
print(result) # Printing the new dictionary
print(type(result))#this shows the json converted as a python dictionary
print("********************************") #printing till here
return render_template('index.html') # this line giving error
if __name__ == '__main__':
app.run(debug=True)
Output:
{"firstname":"noob","lastname":"master"}
<class 'str'>
{'firstname': 'noob', 'lastname': 'master'}
<class 'dict'>
********************************
Issue: If you look at the output, it printing everything fine in the terminal. But the last code line, where I am returning render_template, its showing error that "TypeError: the JSON object must be str, bytes or bytearray, not NoneType" on my webpage instead of returning "index.html" webpage. Also attaching image of debugger showing error:
This is a complete code so you can try running it at your end also and see if it shows the same error because I am hoping its not browser or version error. I am new to flask and first timer with html/css.
Thank you.
you need to define dataType and contentType and you are using two times JSON.stringify
function myfunction() {
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
var dict_values = {firstname, lastname} //Pass the javascript variables to a dictionary.
console.log(dict_values); // Prints the variables to console window, which are in the JSON format
$.ajax({
url:"/test",
type:"POST",
dataType : "json",
contentType : "application/json; charset=utf-8",
data: JSON.stringify(dict_values)});
}
JSON.stringify converts Javascript Object to string. we can see you are converting const s to string twice. Please remove one JSON.stringify and check.