How to reference values when iterating an object with #each built-in Handlebars helper?

Question

I try to generate a table out of a JSON response

I know how to access the key but i do not find a way to get the value.

{{#each this}}
  {{@key}}
{{/each}}

Each key will be a row and the value will represent the content of the row (like in the below image)

The response is below :

this:

{  
   "DistributedQueue-0":{  
      "MessagesCurrentCount":"0",
      "MessagesPendingCount":"0",
      "MessagesReceivedCount":"0",
      "MessagesHighCount":"0",
      "ConsumersCurrentCount":"0",
      "ConsumersHighCount":"0",
      "ConsumersTotalCount":"0"
   },
   "PatientNotificationQueue":{  
      "MessagesCurrentCount":"0",
      "MessagesPendingCount":"0",
      "MessagesReceivedCount":"0",
      "MessagesHighCount":"0",
      "ConsumersCurrentCount":"0",
      "ConsumersHighCount":"0",
      "ConsumersTotalCount":"0"
   },
   "Topic-0":{  
      "MessagesCurrentCount":"0",
      "MessagesPendingCount":"0",
      "MessagesReceivedCount":"0",
      "MessagesHighCount":"0",
      "ConsumersCurrentCount":"0",
      "ConsumersHighCount":"0",
      "ConsumersTotalCount":"0"
   }
}

can you post your html expression code here how your iterating it. Also how are you passing this data to UI? — Mithun Shreevatsa, Feb 23 '16 at 10:39
`{{#each this}} {{@key}} = {{this}} {{/each}}` - the `{{this}}` inside `each` block should be the value in current iteration. — pawel, Feb 23 '16 at 10:45
and the values inside {{this}} like MessagesCurrentCount ? Thanks — Cris, Feb 23 '16 at 10:48

pawel · Accepted Answer · 2016-02-23T10:59:15.327

The value of the element in each iteration is available as {{this}} inside a block like {{#each}}. So

{{#each this}} 
 {{@key}} = {{this}} 
{{/each}}

In your case it would render something like

KeyName: [object Object]

since {{this}} now refers to the value, which is an object itself. You know how to iterate over an object using {{#each}} - you have just done that. Now you just need to use a nested {{#each}} loop! :)

{{#each this}}
  {{@key}}: 
    {{#each this}}
      {{@key}}: {{this}}
    {{/each}}
{{/each}}

Demo: http://jsfiddle.net/f5feae43/2/

How to reference values when iterating an object with #each built-in Handlebars helper?

1 Answers1