Cannot retrieve data from my flask CRUD application from mysql table even though its getting inserted without any error

Question

Here's the python snippet

@app.route('/oxygenadmin')
@is_logged_in
def oxygenadmin():
    cur=mysql.connection.cursor()
    cur.execute("SELECT * FROM oxygen")
    data =cur.fetchall()
    cur.close()
    return render_template('oxygenadmin.html', oxygen=data)
    



@app.route('/insert', methods=['POST'])
@is_logged_in
def insert():
    if request.method == 'POST':
        name = request.form['name']
        contact = request.form['contact']
        email = request.form['email']
        place = request.form['place']

        cur = mysql.connection.cursor()
        cur.execute("INSERT INTO oxygen(name, contact, email, place) VALUES (%s, %s, %s, %s)",(name,contact,email,place))
        mysql.connection.commit()
        flash("Data inserted successfully", 'success')
        return redirect (url_for('oxygenadmin'))
    return render_template ('oxygenadmin.html')

And here's the html snippet

<div class="row">
            <div class="col md-12">
                <h2> Oxygen Details <button type="button" class="btn btn-success pull-right" data-toggle="modal" data-target="#mymodal">Enter New Data</button> </h2>

                <table class="table table-striped">
                    
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Contact No.</th>
                        <th>Email</th>
                        <th>Place</th>
                        <th>Action</th>
                    </tr>
                {% for row in oxygen %}
                
                    <tr>
                        <td>{{row.0}}</td>
                        <td>{{row.1}}</td>
                        <td>{{row.2}}</td>
                        <td>{{row.3}}</td>
                        <td>{{row.4}}</td>
                        <td>
                            <a href="" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#modaledit">Edit</a>
                            <a href="" class="btn btn-danger btn-xs" onclick="return confirm('Are you sure you want to delete?')">Delete</a>


                        </td>
                    </tr>
                {% endfor %}
                </table>
            </div>
        </div>

and...

<div id="mymodal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Please insert data!</h4>
                    </div>
                    <div class="modal-body">
                        <form action="{{url_for('insert')}}" method="POST">
                            <div class="form-group">
                                <label>Name:</label>
                                <input type="text" class="form-control" name="name" required='1'>
                            </div>
                            <div class="form-group">
                                <label>Contact No. :</label>
                                <input type="text" class="form-control" name="contact" required='1'>
                            </div>
                            <div class="form-group">
                                <label>Email</label>
                                <input type="text" class="form-control" name="email">
                            </div>
                            <div class="form-group">
                                <label>Place</label>
                                <input type="text" class="form-control" name="place" required='1'>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary" type="submit">Insert Data</button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

I somehow just cant get it to appear on my page

Here's how it looks in the website itself

But it's getting inserted in the actual database though Didnt paste the entire picture because there are some personal details

The table name is oxygen, I probably think it's doing something with the name itself , I just cant get it

Answer 1

Changing this...

{% for row in oxygen %}
                
                    <tr>
                        <td>{{row.0}}</td>
                        <td>{{row.1}}</td>
                        <td>{{row.2}}</td>
                        <td>{{row.3}}</td>
                        <td>{{row.4}}</td>
                        <td>
                            <a href="" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#modaledit">Edit</a>
                            <a href="" class="btn btn-danger btn-xs" onclick="return confirm('Are you sure you want to delete?')">Delete</a>


                        </td>
                    </tr>
                {% endfor %}

to

{% for row in oxygen %}
                
                    <tr>
                        <td>{{row["id"]}}</td>
                        <td>{{row["name"]}}</td>
                        <td>{{row["contact"]}}</td>
                        <td>{{row["email"]}}</td>
                        <td>{{row["place"]}}</td>
                        <td>
                            <a href="" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#modaledit">Edit</a>
                            <a href="" class="btn btn-danger btn-xs" onclick="return confirm('Are you sure you want to delete?')">Delete</a>


                        </td>
                    </tr>
                {% endfor %}

solves the issue