Search code examples
htmlfirebaseflaskgoogle-cloud-firestorejinja2

How to query data from firestore using flask and jinja and display it in Web


I tried to print the client list and all the data is shown but I have no idea how to display<br> it in the table below. as I have added a client and it is stored in firestore but when I fetch the data from the collection the table is created and the client is fetched. !!! even when I print the client it is showing all the data but it still is not showing the details in the web. for better understanding I have attached image below. 

in HTML I need to fetch the data from firestore database collection in this table. I added a link of a screenshot of the web for a better understanding.

allclients = db.collection("clients").get() 
     return render_template("admin/clients.html", client_lists=allclients )

{% block content %}

                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">Client Code</th>
                            <th scope="col">Name</th>
                            <th scope="col">Email</th>
                            <th scope="col">Address</th>
                            <th scope="col">Contact</th>
                            <th scope="col">Status</th>
                            <th scope="col">Update</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    {% if client_lists %}
                     {% for client_list in client_lists %}
                    <tbody>
                        <tr>
                            <td>{{client_list.client_id}}</th>
                            <td>{{client_list.first_name}}</td>
                            <td>{{client_list.email}}</td>
                            <td>{{client_list.phone_number}}</td>
                            <td>{{client_list.address}}</td>
                            <td><button type="button" class="btn btn-success">Active</button></td>        
                            <td><button type="button" class="btn btn-primary">Edit</button></td>
                            <td><button type="submit" class="btn btn-danger">Delete</button></td>  
                        {% endfor %}
                        </tr>
                    </tbody>
                    
                </table>
                {% else %}
                
                    <p class="clientnotfound">No Clients Found?, Why don't you try adding a clients.</p>
                
                {% endif %}

{% endblock %}

[Image is below for better understanding][1]


  [1]: https://i.sstatic.net/vGqqM.png

Solution

  • You may want to change your <tbody> to:

    <tbody>
                        {% for client_list in client_lists %}
                            <tr>
                                <td>{{client_list.to_dict()["client_id"]}}</td>
                                <td>{{client_list.to_dict()["first_name"]}}</td>
                                <td>{{client_list.to_dict()["email"]}}</td>
                                <td>{{client_list.to_dict()["phone_number"]}}</td>
                                <td>{{client_list.to_dict()["address"]}}</td>
                                <td><button type="button" class="btn btn-success">Active</button></td>        
                                <td><button type="button" class="btn btn-primary">Edit</button></td>
                                <td><button type="submit" class="btn btn-danger">Delete</button></td>
                            </tr>
                        {% endfor %}
            </tbody>
    

    You need to convert your client_lists to dictionary before using it.

    You can also use client_list.get("email") but it can give you some problems.