Hello there! I am currently working on making an http GET call to an MVC controller action which returns JSON data. The JSON data looks something like this:
[
{
"PlanCode": "P001",
"PlanName": "Plan1"
},
{
"PlanCode": "P002$",
"PlanName": "Plan2$"
},
...
]
I am using Handlebars.js for templating and have the following code snippet:
var PLAN_METHOD = {
handlerData: function (planJSON) {
var templateSource = $("#plan-template").html();
template = Handlebars.compile(templateSource);
var context = planJSON;
plansHTML = template({planJSON:context});
$('#plans-div').html(plansHTML);
},
loadPlansData: function () {
$.get("http://localhost:41801/plan/getplans", null, this.handlerData)
}
};
$(document).ready(function () {
PLAN_METHOD.loadPlansData();
});
The template HTML structure is as follows:
<div id="plans-div">
</div>
<script id="plan-template" type="text/x-handlebars-template">
<table>
<thead>
<tr>
<th>Plan Code</th>
<th>Plan Name</th>
</tr>
</thead>
<tbody>
{{#each Plans}}
<tr>
<td>{{this.PlanCode}}</td>
<td>{{this.PlanName}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
However, I am facing an issue where the 'plansHTML' in the Handlebars JavaScript code is not being populated with the JSON data rows. Any suggestions or help would be greatly appreciated!