EmberJS - Exibindo Chaves em um Objeto

Você pode exibir as chaves no objeto usando o auxiliar # each-in e ele itera uma vez para cada chave passada no objeto.

Sintaxe

<ul>
   {{#each-in array_name as |block-param| }}
      <li>{{block-param}}</li>
   {{/each}}
</ul>

No código acima, template itera array_name , que inclui objetos e cada chave no objeto especificado como block-param .

Exemplo

O exemplo fornecido a seguir exibe as chaves no objeto usando o auxiliar # each-in . Para exibir os itens, crie um componente usando o seguinte comando -

ember g component store-categories

Agora abra o store-categories.js criado em app / component / junto com o seguinte código -

import Ember from 'ember';

export default Ember.Component.extend ({
   willRender() {
      this.set('typesOfvehicles', {
         'Cars': ['Ferrari', 'Audi', 'BMW'],
         'Motor bikes': ['Harley-Davidson', 'Yamaha','Honda']
      });
   }
});

Crie um modelo chamado store-categories.hbs em app / templates / com o seguinte código -

<ul>
   {{#each-in typesOfvehicles as |category products|}}
      <li>{{category}}
         <ol>
            {{#each products as |product|}}
               <li>{{product}}</li>
            {{/each}}
         </ol>
      </li>
   {{/each-in}}
</ul>

Para listar as chaves no objeto, use o seguinte código no arquivo application.hbs criado em app / templates / -

<p>This is Displaying the Keys in an Object:</p>
{{store-categories}}
{{outlet}}

Resultado

Execute o servidor ember e você receberá a seguinte saída -