How to add number in front of list item with Jinja Flask?

February 3, 2022

I am learning flask & have created a very basic page which renders Jokes from the pyjokes library
Here my doubt is though the jokes are populating in the list but all the items are having 1. in front of them how can I increase these number

Python code

from flask import Flask, redirect, url_for, render_template
import pyjokes
import sys

app = Flask(__name__)


jokes = pyjokes.get_jokes()
# Defining the home page of our site


@app.route("/")  # this sets the route to this page
def home():
    # print(jokes)
    return render_template("1.html" , jokes = jokes)  # some basic inline html


@app.route("/<anything>")
def user(anything):

    return f"Hello {anything}! plz go back nothing here "


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

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Welcome to home page</h1>
    <h3>Below are jokes frok python modules jokes</h3>
    {% for x in jokes %}
    <ol><li>{{x}}</li></ol>
    
    {% endfor %}
    
    
</body>
</html>

Sample Current Output

Welcome to home page
Below are jokes frok python modules jokes
1.Complaining about the lack of smoking shelters, the nicotine addicted Python programmers said 1.there ought to be 'spaces for tabs'.
1.Ubuntu users are apt to get this joke.
1.Obfuscated Reality Mappers (ORMs) can be useful database tools.
& so on ...

Expected Output

Welcome to home page
    Below are jokes frok python modules jokes
    1.Complaining about the lack of smoking shelters, the nicotine addicted Python programmers said 1.there ought to be 'spaces for tabs'.
    2.Ubuntu users are apt to get this joke.
    3.Obfuscated Reality Mappers (ORMs) can be useful database tools.
    & so on ...

>Solution :

Try this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Welcome to home page</h1>
    <h3>Below are jokes frok python modules jokes</h3>
    <ol>
        {% for x in jokes %}
        <li>{{x}}</li>
        {% endfor %}
    </ol>

</body>
</html>

Looks like you’re creating a new ordered list for each element, instead of one ordered list with all the elements contained in it.