How can I get the names of name-value pairs in Handlebars?

Question

I have this data structure:

flavors": {
            "sour": 0.16666666666666666,
            "salty": 0.16666666666666666,
            "sweet": 0,
            "meaty": 0.16666666666666666,
            "bitter": 0.16666666666666666
        }

My html is this:

<p>Flavors:</p>
   <ul>
     {{#Flavors}}
           <li>{{Flavours.Name}}</li>  // doesn't work  //
        {{/Flavors}}
     </ul>

What I'm trying to do is get at the name of the flavour: i.e. salty, sour, etc. I want to be able to cater for arbitrary values is the JSON, and not code them in the html block.

score 12 · Answer 1 · edited May 23 '17 at 12:26

12

You may iterate over the object in this way:

{{#each myObject}}
    Key: {{@key}} Value = {{this}}
{{/each}}

For details check this post: Handlebars/Mustache - Is there a built in way to loop through the properties of an object?

edited May 23 '17 at 12:26

Community

1
1

answered Dec 11 '13 at 11:52

Slawomir Pasko

785
6
14

I get an "uncaught exception error" Uncaught Error: Parse error on line 17: ...lavors}} Key: {{@key}} Value = {{thi ----------------------^ Expecting 'ID', got 'undefined' – mike Dec 11 '13 at 16:48

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

the answer to my question is on this page: Handlebars/Mustache - Is there a built in way to loop through the properties of an object?

it's Ben's answer. Works very well indeed!

edited May 23 '17 at 11:55

Community

1
1

answered Dec 11 '13 at 16:52

mike

101
1
6

score -1 · Answer 3 · answered Dec 11 '13 at 11:51

-1

Iterate over json and use key to get property names.

for (var key in obj) {
   alert(' name=' + key + ' value=' + obj[key]);
   // do some stuff here
}

answered Dec 11 '13 at 11:51

Sven

303
2
12

I want to use handlebars if possible – mike Dec 11 '13 at 16:50

score -1 · Answer 4 · answered Dec 11 '13 at 11:54

-1

Your template should be like the following:

<p>Flavors:</p>
<ul>
 {{#each flavours}}
       <li>{{@key}}</li>
    {{/each}}
 </ul>

according with the documentation on the website.

answered Dec 11 '13 at 11:54

MarcoL

9,309
3
34
50

The same error as above: Uncaught Error: Parse error on line 17: ...lavors}} Key: {{@key}} Value = {{thi ----------------------^ Expecting 'ID', got 'undefined' – mike Dec 11 '13 at 16:50
Not really clear here why this is down voted. It is exactly the same syntax as the accepted answer plus some HTML tags. – MarcoL May 07 '15 at 18:10

How can I get the names of name-value pairs in Handlebars?

4 Answers4