I recently inherited a large software project using Python/Flask on the backend and HTML/Javascript on the frontend. I'm now looking to add some interactivity to one of the websites. I have successfully passed a dataframe to the webpage and can display its content. I have implemented filters as buttons to switch between different views, with the ability to access filter values within the webpage itself. How can I pass these new values to the dataframe for filtering without needing to fully reload the page? It's worth noting that I use template.render() instead of render_templates() due to the absence of a templates folder in the project, making it too cumbersome to make this change. Here is the relevant Python code:
@app.route('/tagging/OverviewPerDoc.html')
def analysis():
x = <function that returns a Pandas dataframe>()
tempid = globalxmlid
datatuple = [x, tempid]
filetoopen = os.path.join(os.getcwd(), config.filepaths.overviewperdoc)
with open(filetoopen) as fi:
template = Template(fi.read())
return template.render(data=datatuple)
This is the website aspect:
<body>
(...)
<button id="magicbutton" class="btn btn-primary my-group-button" type="submit" style="margin-right:5px;" value="Show">Show</button>
(...)
{% block content %}
(...)
<h1 align="center">{{data[0][data[0]['identifier'] == data[1]]['Name'].iloc[0]}}</h1>
(...)
<div class="container">
<table>
<tr>
<th></th>
(...)
<tr>
<td>Value</td>
<td>{{data[0][data[0]['identifier'] == data[1]]['Value'].iloc[0]}} {{data[0][data[0]['identifier'] == data[1]]['currency'].iloc[0]}}</td>
<td>100%</td>
</tr>
(...) When clicking on my test button, I can print its value to the console.
<script>
function magicfunction()
{
var test = savethecurrentxml;
console.log(test);
}
</script>Everything is functioning correctly, but I'm looking to modify it to something like:
data[0][data[0]['identifier'] == test]['Name'].iloc[0]
How can I go about accomplishing this?