I managed to load the table with the headers but i am not getting any data displayed below the headers. Can you help me see what is wrong with my code?

{% extends "base.html" %}
{% block mainblock %}

    <div class="container mt-4">
        <h2>{{ panel }}</h2>
        
        <!-- BMI Data Table -->
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">BMI History</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="bmiTable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>DateTime</th>
                                <th>Height</th>
                                <th>Weight</th>
                                <th>BMI</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Table data will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {% endblock %}

    {% block scripts %}
    <script>
    function loadBMIData() {
        $.ajax({
            url: "{{ url_for('bmi.get_bmi_data') }}",
            type: "POST",
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({}),  // No need to send email_id since we're using current_user
            error: function(xhr, status, error) {
                console.error("Error loading BMI data:", error);
                alert("Error loading BMI data. Please try again.");
            },
            success: function(response) {
                if (response.error) {
                    console.error("Server error:", response.error);
                    alert("Error: " + response.error);
                    return;
                }
                
                const tableBody = $('#bmiTable tbody');
                tableBody.empty();
                
                if (response.data.length === 0) {
                    tableBody.append('<tr><td colspan="4" class="text-center">No BMI data available</td></tr>');
                    return;
                }
                
                response.data.forEach(function(item) {
                    const row = $('<tr>');
                    row.append($('<td>').text(item.datetime));
                    row.append($('<td>').text(item.height));
                    row.append($('<td>').text(item.weight));
                    row.append($('<td>').text(item.bmi));
                    tableBody.append(row);
                });
            }
        });
    }

    $(document).ready(function() {
        // Load data when page opens
        loadBMIData();
    });
    </script>

{% endblock %}

and for my router

@bmi.route('/manage_bmi')
def manage_bmi():
    if current_user.email != "admin@abc.com":
        return render_template('manage_bmi.html', 
                         name=current_user.name, 
                         panel="Manage BMI Data")

# Route to handle AJAX request for BMI data
@bmi.route('/get_bmi_data', methods=['POST'])
def get_bmi_data():
    try:
        # Get BMI logs for the current user
        user = User.getUser(email=current_user.email)
        bmi_logs = BMILOG.objects(user=user).order_by('-datetime')
        
        # Format the data for the table
        bmi_data = []
        for log in bmi_logs:
            bmi_data.append({
                'datetime': log.datetime.strftime('%Y-%m-%d %H:%M:%S'),
                'height': log.height,
                'weight': log.weight,
                'bmi': round(log.bmi, 2)
            })
        
        return jsonify({'data': bmi_data})
    except Exception as e:
        print(f"Error: {e}")
        return jsonify({'error': str(e)}), 400