Utilizing handlebars.js, I am iterating through the categories and then accessing an element in the series array using the current array index. This is achieved with the following helper function.
var json={
"categories": [{
"id": 3,
"name": "category 0"
}, {
"id": 6,
"name": "category 1"
}
],
"series": [{
"id": 1,
"name": "DUMMY",
"data": [{
"id": 5,
"name": "series 0 data 0"
}, {
"id": 10,
"name": "series 0 data 1"
}
]
}
]
}
Handlebars.registerHelper('getArrayValues', function(ar, index, prop) {
return ar[0].data[index][prop];
});
var template = Handlebars.compile(json);
{{#each categories}}
<p>id: {{this.id}}</p>
<p>name: {{this.name}}</p>
<p>series id with helper: {{getArrayValues ../series @index 'id' }}</p>
<p>series name with helper: {{getArrayValues ../series @index 'name' }}</p>
{{/each}}
Is it possible to achieve this without a helper function? Here is my attempt where I tried to access the properties that the lookup function returns but seem to face issues.
{{#each categories}}
<p>id: {{this.id}}</p>
<p>name: {{this.name}}</p>
<p>series id: {{../series.[0].data.[@index].id}}</p>
<p>series name: {{../series.[0].data.[@index].name}}</p>
{{/each}}