Hanldebars/JSON - populating a select box complete with optgroups - handlebars.js

Question

Dataset:
{
"data": {
"some": [],
"other": [],
"goes": [],
"workoutUnitLabels": [{
"groupLabel": "DISTANCE",
"selected": "",
"unitID": 2,
"unitLabel": "Meters"
}, {
"groupLabel": "DISTANCE",
"selected": "",
"unitID": 3,
"unitLabel": "Miles"
}, {
"groupLabel": "DISTANCE",
"selected": "",
"unitID": 4,
"unitLabel": "Yards"
}, {
"groupLabel": "TIME",
"selected": "selected",
"unitID": 5,
"unitLabel": "Time (hh:mm:ss)"
}, {
"groupLabel": "VELOCITY",
"selected": "",
"unitID": 6,
"unitLabel": "Velocity (m/s)"
}]
}
}
Given the dataset above, I'm trying to pass this to a handlebar template but can't figure out the looping I need to do to get it to work right. Below is what I'm looking to build out:
<select>
<optgroup label="DISTANCE">
<option value="2">Meters</option>
<option value="3">Miles</option>
<option value="4">Yards</option>
</optgroup>
<optgroup label="TIME">
<option value="5">Time (hh:mm:ss)</option>
</optgroup>
<optgroup label="VELOCITY">
<option value="6">Velocity (m/s</option>
</optgroup>
But this is what mine is currently doing (notice the DISTANCE gets repeated).
<select>
<optgroup label="DISTANCE">
<option value="2">Meters</option>
</optgroup>
<optgroup label="DISTANCE">
<option value="3">Miles</option>
</optgroup>
<optgroup label="TIME">
<option value="5">Time (hh:mm:ss)</option>
</optgroup>
<optgroup label="VELOCITY">
<option value="6">Velocity (m/s)</option>
</optgroup>
</select>
And here is what my handlebar template looks like:
{{#each .}}
<label>some label here <input type="text" name="somename" value="{{somevalue}}" /></label>
<select>
{{#workoutUnitLabels}}
<optgroup label="{{groupLabel}}">
<option value="{{unitID}}" {{selected}}>{{unitLabel}} ({{unitID}})</option>
</optgroup>
{{/workoutUnitLabels}}
</select>
{{/each}}
Any advice on what I need to switch up here?

Answer 1

There is no easy way to do that using handlebars, it would be better to tranform your data first. That said, assuming that your data will always be ordered by the groupLabel, it would be possible to do this (even though it's not pretty):
Helper:
Handlebars.registerHelper('notEqPrev', function(index, workoutUnitLabels, options) {
let prev = index - 1 < 0 ? 0 : index - 1;
if (index === 0 || workoutUnitLabels[prev].groupLabel !== workoutUnitLabels[index].groupLabel) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
HTML:
<label>some label here <input type="text" name="somename" value="{{somevalue}}" /></label>
<select>
{{#with data.workoutUnitLabels as |work| }}
{{#each work }}
{{#notEqPrev #index work }}
{{#unless #first }}
</optgroup>
{{/unless}}
<optgroup label="{{groupLabel}}">
{{/notEqPrev}}
<option value="{{unitID}}" {{selected}}>{{unitLabel}} ({{unitID}})</option>
{{#if #last}}
</optgroup>
{{/if}}
{{/each}}
{{/with}}
</select>