Read - Getting Data Back
You can save patients. Now let's fetch them and display them in the table - automatically, every time the page loads.
The Flask endpoint
Add a GET route to app.py that returns all patients as JSON:
@app.route('/patients', methods=['GET'])
def get_patients():
patients = Patient.objects.all()
result = []
for patient in patients:
result.append({
"id": str(patient.id),
"name": patient.name,
"age": patient.age
})
return jsonify(result)
str(patient.id) converts the UUID to a string so it can travel in the JSON response. You will need that id on the frontend when the user clicks Edit or Delete on a row.
Storing the id on each row's buttons
When you build the table rows in JavaScript, you will eventually need Edit and Delete buttons. Each button needs to know which patient it belongs to. You store the id using a data-id attribute:
html += `<tr>
<td>${patient.name}</td>
<td>${patient.age}</td>
<td>
<button data-id="${patient.id}" onclick="editPatient(this)">Edit</button>
<button data-id="${patient.id}" onclick="deletePatient(this)">Delete</button>
</td>
</tr>`
When the user clicks a button, this refers to the button element. Inside editPatient, you read the id back with button.dataset.id.
The loadPatients function
function loadPatients() {
fetch("/patients")
.then(response => response.json())
.then(patients => {
let tbody = document.getElementById("patient-rows")
let html = ""
for (let patient of patients) {
html += `<tr>
<td>${patient.name}</td>
<td>${patient.age}</td>
<td>
<button class="btn btn-sm btn-warning me-1" data-id="${patient.id}" onclick="editPatient(this)">Edit</button>
<button class="btn btn-sm btn-danger" data-id="${patient.id}" onclick="deletePatient(this)">Delete</button>
</td>
</tr>`
}
tbody.innerHTML = html
})
.catch(error => console.log("Error loading patients:", error))
}
Auto-load on page open
Call loadPatients() at the bottom of your script block. It runs once when the page first loads and fills the table automatically:
<script>
function loadPatients() { ... }
function addPatient() { ... }
loadPatients() // runs immediately when the page opens
</script>
Also call loadPatients() at the end of addPatient() so the table refreshes after every new record.
Reading a single patient
Sometimes you only want one record. A URL parameter tells Flask which one:
@app.route('/patients/<string:id>', methods=['GET'])
def get_patient(id):
patient = Patient.objects.get(id=id)
return jsonify({
"id": str(patient.id),
"name": patient.name,
"age": patient.age
})
Visit /patients/f47ac10b-... and you get back just that one patient. The UUID in the URL is the URL parameter - Flask pulls it out and passes it to the function as id.
Challenge
Add the GET /patients route to your app. Update loadPatients() to match the code above. Run the app, add a couple of patients, and confirm the table fills on its own when you open the page - no button needed.