My NodeJS/Express application utilizes Handlebars for templates, and everything works smoothly except when attempting to display data retrieved from an Express API.
The data is successfully fetched and can be viewed in the Chrome debugger.
In the problematic template, I am constructing the HTML within a script tag and then compiling it using JS.
Below is the sample template HTML code:
<script id="search-result-template" type="text/x-handlebars">
<div>String</div>
{{#each patient}}
<div>
{{cp_first_name}}
</div>
{{!-- {{> searchresultpartial}} --}}
{{/each}}
</script>
The overall page structure is more complex, but I've presented this simplified version for debugging purposes.
The following code fragment compiles the template:
let patientSearchButton = document.getElementById('patient-search-execute');
patientSearchButton.addEventListener("click", async function (e) {
e.preventDefault();
let patientSearchFirstname = document.getElementById('patient-search-firstname')
let cp_first_name = patientSearchFirstname.value;
let url = baseURL + 'patientsearchquery/' + cp_first_name;
const response = await fetch(url, {
method: 'get',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
}
});
var data = response.json();
let patientList = await data;
patient = patientList;
if (response.status === 200) {
let patientSearchResultTemplate = document.querySelector("#search-result-template").innerHTML;
let patientSearchResultTemplateFunction = Handlebars.compile(patientSearchResultTemplate);
let patientSearchResultTemplateObject = patientSearchResultTemplateFunction(patient);
let contentPartial = document.getElementById('patient-search-table');
contentPartial.innerHTML = patientSearchResultTemplateObject;
if (Handlebars.Utils.isArray(patient)) {
console.log("Array");
} else {
console.log("Not");
}
console.log(patient);
} else {
alert("HTTP-Error: " + response.status);
}
});
I'm able to view the API data and confirm that Handlebars recognizes it as an Array.
However, the issue arises when iterating through the #each helper in the template.
I've attempted various approaches like using ../ to adjust the context and trying different methods to pass the data into the template.
Initially, I thought the "this" context might have been disrupted due to being within an event handler tied to a button click. I tested moving the code outside the event handler, and despite the correct display of "this" context in Chrome, the behavior remained unchanged.
When inspected in Chrome, the array data looks like this: https://i.stack.imgur.com/SFzi8.png
Upon pausing on a breakpoint in Chrome, I observed that the patient data is present when passed to the template.
I understand there's likely a simple solution, but after exhausting my options, I find myself at a loss.
This issue has occurred with two distinct templates, albeit similar. Despite experimenting with multiple variations, the problem persists.
Any insights or suggestions would be greatly appreciated.
Additionally, I revised the code to pass the property explicitly, as seen in Chrome here: https://i.stack.imgur.com/k3gBX.png
Despite successfully displaying the property in Chrome, Handlebars still does not render it properly.
While this.patients showcases the data in the console, the variable fails to render in Handlebars. What could be preventing its rendering?