Odoo: Data from Model Not Displaying in Website Template Table

Question

Question: I'm working on an Odoo project where I'm trying to display data from a custom model (brgy.officers) in a table on a website template. However, I'm facing an issue where the data is not showing up in the table as expected.

Here's an overview of my setup:

I have a custom Odoo model named brgy.officers with fields such as full_name, position, chairmanship, term_start, term_end, and status.

I've created a website template (brgy_admin_template.xml) where I've defined a table to display the data from the brgy.officers model.

In my custom controller (BarangayManagementController), I've defined a route to fetch the data from the model using a JSON route (/get_brgy_officers_data) and then use AJAX to retrieve and populate the table in my template.

Despite following these steps, the data is not being displayed in the table on the website. I've checked the network requests, and it seems that the JSON route is returning a 404 error, indicating that the route is not being recognized.

Here's a simplified version of my code:

brgy_admin_template.xml:

<odoo>
<template id="brgy_admin_template" name="Barangay Administration">
    <t t-extend="website.layout">
        <t t-jquery="div#wrap" t-operation="replace">
            
            <!-- Material CDN -->
            <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet"/>


            <!-- Main stylesheet -->
            <link rel="stylesheet" href="/brgy_management/static/src/css/app.css"/>
        </t>

        <t>
            <!-- Start coding here -->
            <div class="body">
                <div class="container">
                    <!-- Start Aside -->
                    <aside>
                        <div class="top">
                            <div class="logo">
                                <img t-attf-src="/brgy_management/static/src/images/logo.png" alt="Logo"/>
                                <h2>Barangay <span class="danger">Management</span></h2>
                            </div>

                            <div class="close" id="close-btn">
                                <span class="material-icons-sharp">close</span>
                            </div>
                        </div>

                        <div class="sidebar">
                            <a href="#">
                                <span class="material-icons-sharp">dashboard</span>
                                <h3>Dashboard</h3>
                            </a>
                            <h4>MENU</h4>
                            <a href="#" class="active">
                                <span class="material-icons-sharp">groups</span>
                                <h3>Barangay Officials and Staffs</h3>
                            </a>
                            <a href="#">
                                <span class="material-icons-sharp">contact_page</span>
                                <h3>Residents Record</h3>
                            </a>
                            <a href="#">
                                <span class="material-icons-sharp">workspace_premium</span>
                                <h3>Barangay Certificates</h3>
                            </a>
                            <a href="#">
                                <span class="material-icons-sharp">description</span>
                                <h3>Certificate of Indigency</h3>
                            </a>
                            <a href="#">
                                <span class="material-icons-sharp">article</span>
                                <h3>Business Clearances</h3>
                            </a>
                            <a href="#">
                                <span class="material-icons-sharp">report</span>
                                <h3>Blotter Records</h3>
                            </a>
                            <a href="#">
                                <span class="material-icons-sharp">logout</span>
                                <h3>Logout</h3>
                            </a>
                        </div>
                    </aside>
                    <!-- End of Aside -->

                    <!-- Start Main -->
                    <main>
                    <h1>Barangay Administration</h1>
                        <div class="officers">
                            <div class="create-button">
                                <a href="#" class="create-btn">Create</a>
                            </div>
                            <table>
                                <thead>
                                    <tr>
                                        <th>Full Name</th>
                                        <th>Position</th>
                                        <th>Chairmanship</th>
                                        <th>Term Start</th>
                                        <th>Term End</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody id="officials-table-body"></tbody>
                            </table>
                            <a href="#">Show All</a>
                        </div>
                    </main>
                    <!-- End of Main -->
                </div>
            </div>

            <script src="app.js"></script>
        </t>
    </t>
</template>

BarangayManagementController:

from odoo import http
from odoo.http import request
from odoo.tools import date_utils

class BarangayManagementController(http.Controller):
    @http.route('/barangay_administration', website=True, auth='public')
    def barangay_admin_page(self, **kw):
        officers = request.env['brgy.officers'].search([])  # Fetch all records
        return http.request.render('brgy_management.brgy_admin_template', {'officials': officers})

    @http.route('/get_brgy_officers_data', type='json', auth='public')
    def get_brgy_officers_data(self):
        officers = request.env['brgy.officers'].search([]).read(['full_name', 'position', 'chairmanship', 'term_start', 'term_end', 'status'])
        for officer in officers:
            officer['term_start'] = date_utils.to_string(officer['term_start'])
            officer['term_end'] = date_utils.to_string(officer['term_end'])
        return officers

app.js:

$(document).ready(function () {
    $.ajax({
        url: '/get_brgy_officers_data',
        dataType: 'json',
        success: function (data) {
            // Code to populate the table
        }
    });
});

I've ensured that the model and fields are correctly defined, and the template and controller routes are properly set up. However, the data is not displaying in the table, and the JSON route is returning a 404 error.

Any insights or suggestions on what might be causing this issue and how to resolve it would be greatly appreciated. Thank you in advance for your help!