generate list in html in flask python dynamically without specifying each field in ul or tr

Question

I am bit new in python and flask, i ve been trough lot of tutorial and web forums, couldn't find way to generate dynamically.

here's an example , html code :

<tr>
                <td scope='row'>{{ data["courseID"] }}</td>
                <td>{{ data["title"] }}</td>
                <td>{{ data["description"] }}</td>
                <td>{{ data["credits"] }}</td>
                <td>{{ data["term"] }}</td>
                <td>
                    <form action="{{url_for('enrollment')}}" method="POST">
                        <input type="hidden" name="courseID" value="{{data['courseID']}}">
                        <input type="hidden" name="title" value="{{data['title']}}">
                        <input type="hidden" name="term" value="{{data['term']}}">
                    <button>Enroll</button>
                </form>
                </td>
            </tr>
            {% endfor %}
            
            </tbody>
        </table>
    </div>
{% endblock %}

app py code is :

class Course(mongo.Document):
    courseID = mongo.StringField(max_length=10, unique=True)
    title = mongo.StringField(max_length=100)
    description = mongo.StringField(max_length=255)
    credits = mongo.IntField()
    term = mongo.StringField(max_length=25)
@app.route("/courses/")
@app.route("/courses/<term>")
def courses(term = None):
    if term is None:
        term = "Spring 2019"
    classes = Course.objects.order_by("-courseID")
    return render_template("courses.html", courseData=classes, courses = True, term=term )

what am looking for tutorial or way how to list all labels in one line and list all data in one line too in html code. reason for that, is in future am looking to display whole table that i generate from a query, and if each time i have to code that as class and in html (specially if columns are more that 10) will be time consuming. wasnt able to find proper example to learn from it.

To be clear, you want to dynamically add columns to the html table so you don't need to specify column names? — Mike67
– Mike67, Commented Sep 13, 2020 at 0:00
that's right Mike. like if i have result from mongodb as object, i want to display it in html, without coding lables and data for each TR. thx — Med SAM
– Med SAM, Commented Sep 13, 2020 at 5:51

Mike67 · Accepted Answer · 2020-09-13 13:58:32Z

1

One simple option can be to return classes as list of dict (records) , for example

return render_template("courses.html", courseData=classes.to_dict("records"), courses = True, term=term )

Then looping through the keys of the dict as

    {% for dict_item in courseData %}
<tr>
            {% for key, val in dict_item.items() %}
              <td>
                <td>{{ row[key] }}</td>
              </td>
            {% endfor %} }
</tr>
    {% endfor %}

You can do same thing for html form elements

edited Sep 13, 2020 at 13:58

Mike67

11.3k2 gold badges9 silver badges15 bronze badges

answered Sep 13, 2020 at 0:57

A.B

20.5k3 gold badges43 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike67 Over a year ago

Please check your code. There should be a TR for each dict_item and a single TD for each row[key]

A.B Over a year ago

@Mike67 Thanks for highlighting, updated the answer

Med SAM Over a year ago

hi, this helped a lot.

Med SAM Over a year ago

hi, this helped a lot.Thx i did change the code bit for html, since wanted labels as header, and data as rows. <tr>{% for key in (courseData [0].keys()) %} <th>{{ [key] }}</th>{% endfor %}</tr> {% for dict_item in courseData %} <tr>{% for key, val in dict_item.items() %} <td>{{ val }}</td> {% endfor %}</tr> {% endfor %} @Mike67

Med SAM Over a year ago

for py flask code,,,,was getting error for to_dict. used sons = [ob.to_mongo() for ob in courseData and passed sons instead of courseData.

Collectives™ on Stack Overflow

generate list in html in flask python dynamically without specifying each field in ul or tr

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related