New member.
I am currently having issues with a self initialized project to learn how to pass data between Flask-Python RESTful and HTML. I am using various scripts to make this function and since I don’t know jQuery nor JavaScript, most of it is simply learning on the fly or modifying existing examples on the internet.
Issue One. Displaying data from a JSON File in HTML. The script below was working until I needed my objects nested within an array, This is how the JSON data needs to be structured.
JSON Data
{
"aioJSON": [
{
"Entry": "1",
"Adding": "3.0",
"Subtracting": "-1.0",
"Multiplying": "2.0",
"Dividing": "0.5"
}
]
}
This is the Script I am using to retrieve the data from the JSON File.
Script
$(document).ready(function(){
$.getJSON("static/d_calc.json", function(data){
var calculate_data = '';
$.each(data, function(key, value){
calculate_data += '<tr>';
calculate_data += '<td>'+value.Entry+'</td>';
calculate_data += '<td>'+value.Adding+'</td>';
calculate_data += '<td>'+value.Subtracting+'</td>';
calculate_data += '<td>'+value.Multiplying+'</td>';
calculate_data += '<td>'+value.Dividing+'</td>';
calculate_data += '</tr>';
});
$('#calculate_table').append(calculate_data);
});
});
HTML that goes with the script
<table class="basicW3Table" id="calculate_table">
<form id="myform" method="GET">
<tr>
<th>Entry</th>
<th>Add</th>
<th>Subtract</th>
<th>Multiply</th>
<th>Divide</th>
</tr>
</table>
Issue Two. The next dilemma is the need for a script that will call out to a function that has no return. The purpose of the function is to clear the table data (data within the JSON File and add a new blank template).
Explanation. The Front End takes three user inputs: First Number, Second Number, and Entry Number. This is then passed to the Back End and calculated, and then saved in the JSON File. Each time a new calculation is made, the JSON File is then appended and in turn the table increases. However, I want to include an option for the user to clear the table. The issue then becomes, how to get the defined function, below, to work from the front end.
Python-Flask Script
@app.route('/mycalc/JSONtest/', methods=['GET', 'POST'])
def wipe_json():
aioJSON_template = {'aioJSON':[]}
with open('static/d_calc.json','w', encoding='utf-8') as f:
json.dump(aioJSON_template, f, ensure_ascii=True, indent=4)
return '', 204
Issue Three. My last issue, is basically to get the table to refresh each time the user submits input to the Back End. Currently, the set up is: User provides the input and then submits it. After submitting it, then they have to refresh the page to see the results. Here’s what I have so far.
HTML Input Fields and Buttons
<form id="myform" method="GET">
<span>Enter First Number: </span><input type="text" id="fnm" />
<br><br>
<span>Enter Second Number: </span><input type="text" id="snm" />
<br><br>
<span>What entry is this?: </span><input type="text" id="entry" />
<br>
<span>(Example: Enter a 1, 2 or even 345, etc.)</span>
<br><br>
<input type="button" value="Send Data" id="JSONtest" onclick="doAct(id);"/>
<br><br>
<span>If data was passed sucessfully, then result should be [object Object]</span><br>
<span>Note: Status Alert Added</span>
<br><br>
<textarea name="JSONtest-rtn" cols="60" rows="3" type="text" id="tnm"></textarea>
<br><br>
<span>Press Reset Button to Clear the Fields above</span>
<br><br>
<input type="reset" value="Reset" onClick="window.location.reload();">
</form>
Script that goes with the provided HTML
function doAct(lid)
{
fnum=document.getElementById("fnm").value
snum=document.getElementById("snm").value
entry=document.getElementById("entry").value
myform.action="/mycalc/"+lid+"/"+fnum+"/"+snum+"/"+entry+"/"
$.get(myform.action, function(data, status){
alert("Data: " + data + "\nStatus: " + status);
alert(status);
alert(data)
document.getElementById("tnm").value=data
})
}
Any and all guidance on this is greatly appreciated. If you need all of the Python and HTML code, let me know. I am teaching myself how to do this and have made tremendous progress, this is the last leg of this project.
Thank you