Display Object Properties

You can iterate over the properties on a object using the {{#each-in}}{{/each-in}} block helper. This is particularly helpful when the properties on the object are dynamic or unknown ahead of time.

As an example, if your result object contains the following data

{
    entity: entityObj,
    data: {
        summary: ['tag1', 'tag2'],
        details: {
          key1: 'value1',
          key2: 'value2',
          key3: 'value3'
        }
    }
}

You could iterate over the details object with the following

template.hbs
{{#each-in block.data.details as | key value |}}
   <div>
     <span class="p-key">{{key}}</span>
     <span class="p-value">{{value}}"</span>
   </div>
{{/each-in}}

In our example this would create the following HTML

<div>
   <span class="p-key">key1</span>
   <span class="p-value">value1</span>
<div>
<div>
   <span class="p-key">key2</span>
   <span class="p-value">value2</span>
<div>
<div>
   <span class="p-key">key3</span>
   <span class="p-value">value3</span>
<div>

Last updated