Followed these articles:
How to get index in handlebars each helper
Mustache.js - display key instead of value
I am trying to display keys of json and then i want to change the name of key under that object.
{
"success":true,
"msg":"The request to access the credit report successfully processed",
"errors":{
},
"arf":{
"TradeLine":{
"TradeLine":{
"Mortgage Accounts":[
{
"SubscriberDisplayName":"abc",
"MonthsHistory":99,
"PaymentProfile":{
"2017":{
"1":"C",
"2":"C",
"3":"C",
"4":"C",
"5":"C",
"6":"C",
"7":"C",
"8":" ",
"9":" ",
"10":" ",
"11":" ",
"12":" "
},
"2016":{
"1":"C",
"2":"C",
"3":"C",
"4":"C",
"5":"C",
"6":"C",
"7":"C",
"8":"C",
"9":"C",
"10":"C",
"11":"C",
"12":"C"
}
}],
i have created the table and in that i have displayed the other data. now in different row as heading i want to display 2017 and all the key values inside the 2017. But i want to change the key "1" as "jan" , "2" as feb and so on. I am getting table format but i am not getting the Key such as 2017,2016 etc.
My Code: Try 1 :
<thead class="thead-default">
<tr>
<th>{{SubscriberDisplayName}}</th>
</tr>
</thead>
{{# repData}}
{{#each arf.TradeLine.TradeLine.[Mortgage Accounts]}}
<table id="RealEstateTbl" class="table table-sm table-bordered">
{{#each PaymentProfile}}
<tr>
<th>Payment History (Upto 25 months)</th>
<th>{{this.key}}</th>
{{/each}}
</tr>
</table>
{{/each}}
{{/ repData}}
Try 2:
Javascript/Handlers:
var reportTemplate = $("#report-template").html();
var theTemplate = Handlebars.compile(reportTemplate);
var reportData = theTemplate(this.ReportbyIDdata);
$('body').html(theTemplate({repData: this.ReportbyIDdata}));
// console.log(repData);
Handlebars.registerHelper('eachkeys', function(context, options) {
var fn = options.fn, inverse = options.inverse;
var ret = "";
var empty = true;
for (key in context) { empty = false; break; }
if (!empty) {
for (key in context) {
ret = ret + fn({ 'key': key, 'value': context[key]});
}
} else {
ret = inverse(this);
}
return ret;
});
})
{{# repData}}
{{#each arf.TradeLine.TradeLine.[Mortgage Accounts]}}
<table id="RealEstateTbl" class="table table-sm table-bordered">
{{#eachkeys PaymentProfile}}
<tr>
<th>Payment History (Upto 25 months)</th>
<th>{{this.key}}</th>
{{/eachkeys}}
</tr>
</table>
{{/each}}
{{/ repData}}
What to do to
- display the year i.e key
- change the keys inside the object ? i.e display "Jan" instead of "1" ?? -> PS: i haven't tried this yet.
