How to iterate objects in Handlebars? - handlebars.js

Question

I have such a json file. My code below doesn't work. How to iterate "name" in Handlebars?
{ "test": [ { "33": { "name": "Prova 1", "surname": "Federico" } }, { "34": { "name": "Prova 2", "surname": "Antonio " } }, { "35": { "name": "Prova 3", "surname": "Giovanni" } } ] }
<div>
{{debug}}
{{#each test}}
<ul>
<li>{{name}}</li>
</ul>
{{/each}}
</div>

Answer 1

You have to do a double iterating one on test the second on the object in the array to get all properties (I use {{this}} because the name change every time) because name is nested in another object :
{{#each test}}
<ul>
<li>{{#each this}}{{name}}{{/each}}</li>
</ul>
{{/each}}
If you wanted to make work the code you've given you had to have such a json :
{ "test": [
{ "name": "Prova 1", "surname": "Federico" },
{ "name": "Prova 2", "surname": "Antonio " },
{ "name": "Prova 3", "surname": "Giovanni" }
] }
You can check the snippet below that will demonstrate it with your data:
$(document).ready(function() {
var context = {
"test": [{
"33": {
"name": "Prova 1",
"surname": "Federico"
}
},
{
"34": {
"name": "Prova 2",
"surname": "Antonio "
}
},
{
"35": {
"name": "Prova 3",
"surname": "Giovanni"
}
}
]
};
var source = $("#sourceTemplate").html();
var template = Handlebars.compile(source);
var html = template(context);
$("#resultPlaceholder").html(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
<div>
{{#each test}}
<ul>
<li>{{#each this}}{{name}}{{/each}}</li>
</ul>
{{/each}}
</div>
</script>
<br/>
<div id="resultPlaceholder">
</div>

Answer 2

<ul>{{#test}}<li>{{name}}</li>{{/test}}</ul>
try this