How can I add python functions into HTML?

Question

I'm writing a website using Python flask. It has to read a csv file (an excel file saved as csv), do some calculations there, and I need to show the actual table and the results on the website. How do I write the functions in the html file? I need to write them in the places where it says "some table". here's my html file:

<!doctype html>
<html lang="ru">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<div class="container">
  <nav class="navbar">
      <ul>
         <li><a href="#table">first</a></li>
         <li><a href="#problems">second</a></li>
         <li><a href="#rank">third</a></li>
         <li><a href="#cheated">forth</a></li>
        </ul>
      </nav>
  <section id="table">
    <h1>1</h1>
    <p class="lead"> some table</p>
  </section>
  <section id="problems">
      <h1>2</h1>
      <p class="lead">some table</p>
  </section>
  <section id="rank">
      <h1>3</h1>
      <p class="lead">some table</p>
  </section>
  <section id="cheated">
      <h1>4</h1>
      <p class="lead">some table</p>
  </section>
</div>
</html>

here's my py file

from flask import Flask, render_template
from flask import url_for
from flask import make_response, request, redirect
import io
import csv
from io import TextIOWrapper
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

with open('testfinal.csv', 'r') as csv_file:
    csv_reader = csv.reader(csv_file)
    print(csv_reader)

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

if __name__ == "__main__":
    app.run(debug=True)

score 0 · Answer 1 · answered May 31 '21 at 10:58

You can pass variables from flask to your template:

 <!doctype html>
<html lang="ru">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<div class="container">
  <nav class="navbar">
      <ul>
         <li><a href="#table">first</a></li>
         <li><a href="#problems">second</a></li>
         <li><a href="#rank">third</a></li>
         <li><a href="#cheated">forth</a></li>
        </ul>
      </nav>
  <section id="table">
    <h1>1</h1>
    <p class="lead">{{ some_table }} some table</p>
  </section>
  <section id="problems">
      <h1>2</h1>
      <p class="lead"> {{ some_table }} some table</p>
  </section>
  <section id="rank">
      <h1>3</h1>
      <p class="lead">{{ some_table }} some table</p>
  </section>
  <section id="cheated">
      <h1>4</h1>
      <p class="lead"> {{ some_table }}some table</p>
  </section>
</div>
</html>

And then in your server (python):

from flask import Flask, render_template
from flask import url_for
from flask import make_response, request, redirect
import io
import csv
from io import TextIOWrapper
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

@app.route('/')
def about():
    with open('testfinal.csv', 'r') as csv_file:
        csv_reader = csv.reader(csv_file)
        print(csv_reader)
        return render_template("about.html", some_table=csv_reader)

if __name__ == "__main__":
app.run(debug=True)

Note: some_table= in python flask should match to {{ some_table }} in html file.

How can I add python functions into HTML?

1 Answers1