Estimation du temps de lecture : 5 procès-verbal
Vous utilisez donc Python et vous avez des données stockées dans un cadre de données? Vous aimeriez les présenter dans un tableau HTML sur une page Web, mais vous ne savez pas comment y parvenir. Eh bien, lisez la suite pour découvrir deux méthodes différentes qui vous aideront.
Transmettre les données à Javascript qui transmet ensuite au HTML les données nécessaires à la création du tableau.
Dans les deux méthodes, nous utilisons Python Flask qui a un fichier app.py et des fichiers HTML créés pour présenter les résultats.
Étape 1 - Lire les données et créer le cadre de données
Pour ceux qui sont familiers avec Python Flask, nous créons les importations qui nous permettent de créer l'interface de la page web pour présenter les données.
Ensuite, nous créons une liste appelée data, qui stocke les informations dont nous avons besoin. Après cela, nous créons le cadre de données "df".
Enfin, nous créons un fichier JSON , et faisons un peu de nettoyage de données.
from flask import Flask, render_template, json
import pandas as pd
app = Flask(__name__)
data = [['Joe','Dublin','100'],['Francois','Paris','100'],['Michael','Liverpool','100']]
df = pd.DataFrame(data, columns = ['Name', 'City','Age'])
json_output = df.to_json()
json_output = json.loads(json_output.replace("\'", '"')) # Removes back slash from JSON generatedÉtape 2 - Créer les fichiers HTML de sortie
Méthode 1 - Ici, il s'agit simplement de créer la fonction permettant de créer la page Web "index.html". Notez que name_json=json_output capture les données de la première étape, et c'est ce qui est transmis à la page HTML en tant que JSON.
Dans la méthode 2 - Nous utilisons to_html qui rend un DataFrame comme un tableau HTML, pur et simple.
Comme on peut le voir, il stocke les données sur une page HTML qui est stockée dans le dossier des modèles.
#Method 1
@app.route('/')
def index():
return render_template('index.html', name_json=json_output)
#This is the start of method 2#
html = df.to_html()
#write html to file
im2_file = open("templates/index_method2.html", "w")
im2_file.write(html)
im2_file.close()
@app.route('/index_method2')
def index_method2():
return render_template('index_method2.html')
if __name__ == "__main__":
app.run(debug=True)Étape 3 - Créer les tableaux HTML par le biais de javascript
Les étapes 1 et 2 consistaient à préparer les données pour qu'elles puissent être visualisées sur les pages web, alors comment sont-elles construites ?
Nous allons donc parcourir le code, en notant qu'une bonne partie de celui-ci est le HTML utilisé pour présenter les données sur la page.
The first thing to notice is the <style></style> tags. this is for method 1 and applies the boxes around the output.
<pre id=”json”></pre> – This line shows the JSON data as follows:
Dans les quelques lignes ci-dessous, c'est le HTML qui crée la table pour stocker les données de la méthode 1 :
<table id="json_table"> ===> Method 1 table
<tr>
<td> Name</td>
<td> City</td>
<td> Age</td>
</tr>
</table>La section suivante contient le Javascript qui sera utilisé pour la méthode 1 et la méthode 2, je vais le parcourir maintenant :
La première ligne crée donc une variable qui fait référence à la table de la méthode 1, et où les données JSON seront chargées.
La deuxième ligne convertit le JSON en un format qui peut être lu et affiché comme la capture d'écran "JSON" ci-dessus.
Dans les lignes 3 et 4, tout ce que nous faisons ici est de créer une variable pour stocker la sortie de la boucle qui suit dans les lignes suivantes.
La dernière série de lignes du script, à l'exception de la toute dernière ligne (qui se rapporte à la méthode 2), récupère les données capturées dans le cadre de la boucle et les introduit dans le tableau qui apparaît sur index.html, comme suit :
La dernière ligne :
window.open('http://127.0.0.1:5000/index_method2', '_blank') ;
Dans la section Javascript , ceci se rapporte à la méthode 2 et prend les données directement du fichier app.py et les envoie à http://127.0.0.1:5000/index_method2.html.
Il s'agit d'une méthode très rapide et facile pour créer le tableau HTML et, comme on peut le voir, elle implique moins de codage que la méthode 1.
<script>
var selectvalue = document.getElementById("json_table"), test={{ name_json | tojson }}; ===> First line
document.getElementById("json").textContent = JSON.stringify(test, undefined, 2); ===> Second line
const keys = Object.keys(test); ===> Line 3
for (let i = -1; i < keys.length-1; i) ===> Line 4
{
const key = keys[i++];
console.log(key, test[key]);
a = JSON.stringify(test["Name"][i])
b = JSON.stringify(test["City"][i])
c = JSON.stringify(test["Age"][i])
const tbl = document.getElementById("json_table");
const row = tbl.insertRow();
const cell1 = row.insertCell();
const cell2 = row.insertCell();
const cell3 = row.insertCell();
cell1.innerHTML = a;
cell2.innerHTML = b;
cell3.innerHTML = c;
}
window.open('http://127.0.0.1:5000/index_method2', '_blank');
</script>Le code HTML complet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
table, td {
border: 1px solid;
}
</style>
<body>
<pre id="json"></pre>
<div>Method 1 pass the data via JSON to Javascript </div>
<table id="json_table">
<tr>
<td> Name</td>
<td> City</td>
<td> Age</td>
</tr>
</table>
<script>
var selectvalue = document.getElementById("json_table"), test={{ name_json | tojson }};
document.getElementById("json").textContent = JSON.stringify(test, undefined, 2);
const keys = Object.keys(test);
for (let i = -1; i < keys.length-1; i)
{
const key = keys[i++];
console.log(key, test[key]);
a = JSON.stringify(test["Name"][i])
b = JSON.stringify(test["City"][i])
c = JSON.stringify(test["Age"][i])
const tbl = document.getElementById("json_table");
const row = tbl.insertRow();
const cell1 = row.insertCell();
const cell2 = row.insertCell();
const cell3 = row.insertCell();
cell1.innerHTML = a;
cell2.innerHTML = b;
cell3.innerHTML = c;
}
window.open('http://127.0.0.1:5000/index_method2', '_blank');
</script>
</body>
</html>
#how to create a html table from a python dataframe using javascriptLe résultat final
