Is there a way to show all of the elements in a python array in HTML?

  flask, html, python

I want to make a note-taking website using the python module Flask, ArangoDB, and a bunch of HTML files with the CSS framework Bulma. It’s going very well, but I don’t know how to display all of the elements in the array in HTML. I think I should use the script tag, but I don’t know how to use it. I don’t even know JavaScript. Anyway, is there anyone that can help with this?
Here is my python code:

from flask import Flask, render_template, request, redirect, url_for
from arango import ArangoClient

client = ArangoClient()
db = client.db("notes", username="root", password="************")
users = db.collection("Users")["Users"]["users"]

failed = ""
failed_message = "This username is taken"
username = ""
welcome = ""
new_note_message = "Create a new note!"

app = Flask(__name__)

def check_usernames(new_username):
    users = db.collection("Users")["Users"]["users"]
    for i in users:
        if i["username"] == new_username:
            return False
    return True

def check_notes(new_note):
    notes = db.collection("Users")[username]["notes"]
    for i in notes:
        if i["title"] == new_note:
            return False
    return True

@app.route("/")
def home():
    global username
    backup = username
    username = ""
    global failed
    failed = ""
    if backup == "":
        return render_template("index.html")
    else:
        username = backup
        return redirect(url_for("notes_page"))

@app.route("/after-login", methods=["POST"])
def handle_login():
    global welcome
    welcome = "Welcome back!"
    users = db.collection("Users")["Users"]["users"]
    if {"username": request.form["Username"], "password": request.form["Password"]} in users:
        global username
        username = request.form["Username"]
        return redirect(url_for("notes_page"))
    else:
        global failed
        failed = " failed"
        return redirect(url_for("login"))

@app.route("/logout")
def handle_logout():
    global username
    username = ""
    return redirect(url_for("home"))

@app.route("/login")
def login():
    if username == "":
        return render_template("login.html", message="Login" + failed)
    else:
        return redirect(url_for("notes_page"))

@app.route("/register")
def register():
    if username == "":
        return render_template("register.html", message="Register" + failed, submessage="")
    else:
        return redirect(url_for("notes_page"))

@app.route("/after-register", methods=["POST"])
def handle_register():
    global welcome
    welcome = "Welcome!"
    users = db.collection("Users")["Users"]["users"]
    if check_usernames(request.form["Username"]):
        global username
        username = request.form["Username"]
        users.append({"username": request.form["Username"], "password": request.form["Password"]})
        db.aql.execute("UPDATE {_key: 'Users'} WITH {users: " + str(users) + "} INTO Users")
        db.aql.execute("INSERT {_key: '" + username + "'} INTO Users")
        db.aql.execute("UPDATE {_key: '" + username + "'} WITH {notes: []} INTO Users")
        return redirect(url_for("notes_page"))
    else:
        global failed
        failed = " failed"
        return redirect(url_for("register"))

@app.route("/notes")
def notes_page():
    global notes
    notes = db.collection("Users")[username]["notes"]
    if username != "":
        return render_template("notes.html", username=username, notes=notes, welcome=welcome)
    else:
        return redirect(url_for("home"))

@app.route("/new")
def new():
    return render_template("create.html", message=new_note_message)

@app.route("/after-note", methods=["POST"])
def handle_new_note():
    if check_notes(request.form["Title"]):
        global notes
        notes = db.collection("Users")[username]["notes"]
        notes.append({"title": request.form["Title"], "note": request.form["Note"]})
        db.aql.execute("UPDATE {_key: '" + username + "'} WITH {notes: " + str(notes) + "} INTO Users")
        return redirect(url_for("notes_page"))
    else:
        global new_note_message
        new_note_message = "You already made a note with this title"
        return redirect(url_for("new"))

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

and my HTML code for that particular page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{welcome}}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  </head>
  <body>
    
    <section class="section has-text-centered">
      <h1 class="title is-2">Hi {{username}}!</h1>
      <a href={{url_for('new')}} class="button is-rounded is-outlined is-primary">Create a note</a>
      <a href={{url_for('handle_logout')}} class="button is-rounded is-outlined is-danger">Log out</a>
    </section>
  </body>
</html>

I want to have the notes the user created below the 2 buttons, and if not, have the program say: "You have no notes. Create your first note today!"

Is there any way to do this?

Thanks

Source: Python Questions

LEAVE A COMMENT