title: Hanldebars/JSON - populating a select box complete with optgroups
body: <p>Dataset:  </p>
  
  <pre><code>{
      "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)"
          }]
      }
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;select&gt;
      &lt;optgroup label="DISTANCE"&gt;
          &lt;option value="2"&gt;Meters&lt;/option&gt;
          &lt;option value="3"&gt;Miles&lt;/option&gt;
          &lt;option value="4"&gt;Yards&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="TIME"&gt;
          &lt;option value="5"&gt;Time (hh:mm:ss)&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="VELOCITY"&gt;
          &lt;option value="6"&gt;Velocity (m/s&lt;/option&gt;
      &lt;/optgroup&gt;
  </code></pre>
  
  <p></p>
  
  <p>But this is what mine is currently doing (notice the <code>DISTANCE</code> gets repeated).</p>
  
  <pre><code>&lt;select&gt;
      &lt;optgroup label="DISTANCE"&gt;
          &lt;option value="2"&gt;Meters&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="DISTANCE"&gt;  
          &lt;option value="3"&gt;Miles&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="TIME"&gt;
          &lt;option value="5"&gt;Time (hh:mm:ss)&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="VELOCITY"&gt;
          &lt;option value="6"&gt;Velocity (m/s)&lt;/option&gt;
      &lt;/optgroup&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And here is what my handlebar template looks like:  </p>
  
  <pre><code>{{#each .}}
      &lt;label&gt;some label here &lt;input type="text" name="somename" value="{{somevalue}}" /&gt;&lt;/label&gt;
      &lt;select&gt;
          {{#workoutUnitLabels}}
              &lt;optgroup label="{{groupLabel}}"&gt;
                  &lt;option value="{{unitID}}" {{selected}}&gt;{{unitLabel}} ({{unitID}})&lt;/option&gt;
              &lt;/optgroup&gt;
          {{/workoutUnitLabels}}
      &lt;/select&gt;
  {{/each}}
  </code></pre>
  
  <p>Any advice on what I need to switch up here?</p>