Ember.js Ember.Templates.helpers each-in() Method
Last Updated :
08 Dec, 2022
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which is based on Model-View-Controller (MVC) architecture. Ember.js is one of the most widely used front-end application frameworks. It is made to speed up development and increase productivity. Currently, it is utilized by a large number of websites, including Square, Discourse, Groupon, Linked In, Live Nation, Twitch, and Chipotle.
The each-in() method is used to loop over properties on an object.
Syntax:
{{#each-in object as | key value | }}
Parameters:
- object: It is an object on whose property each will loop.
- key: It is an alias for the key of property.
- value: It is an alias for the value of the property.
Steps to Install and Run Ember.js:
Step 1: To run the following examples you will need to have an ember project with you. To create one, you will need to install ember-cli first. Write the below code in the terminal:
npm install ember-cli
Step 2: Now you can create the project by typing in the following piece of code:
ember new <project-name> --lang en
To start the server, type:
ember server
Example 1: Type the following code to generate the route for this example:
ember generate route each1
app/components/compact2.js
Javascript
import Component from '@glimmer/component' ;
import { tracked } from '@glimmer/tracking' ;
export default class extends Component {
food = [{
"food" : "Banana" ,
"Quant" : 5
},
{
"food" : "Pine-apple" ,
"Quant" : 2
},
{
"food" : "Apple" ,
"Quant" : 7
},
{
"food" : "Mango" ,
"Quant" : 4
}];
}
|
app/components/compact2.hbs
HTML
{ { yield } }
{ { #each this.food as | item |} }
< div >
< ul >
{{ #each-in item as | key value|}}
< li >{{ key }} : {{ value }}</ li >
{{/ each -in}}
</ ul >
</ div >
{ { /each}}
|
app/templates/each1.hbs
Javascript
<Compact2 >
<h1>
List of Foods:
</h1>
</Compact2>
{{outlet}}
|
Output:
Ember.js Ember.Templates.helpers each-in() Method
Example 2: Type the following code to generate the route for this example:
ember generate route each2
app/components/compact.js
Javascript
import Component from '@glimmer/component' ;
import { tracked } from '@glimmer/tracking' ;
export default class extends Component {
student = [{
"name" : "Sam Snehil" ,
"age" : 21
},
{
"name" : "Satyam Sahu" ,
"age" : 23
},
{
"name" : "Sohan Argrwal" ,
"age" : 25
},
{
"name" : "Sreya Sarma" ,
"age" : 19
}];
}
|
app/components/compact.hbs
HTML
{{yield}}
< ul >
{{#each this.student as |item|}}
< div >
{{#each-in item as |key value |}}
< li >{{key}}: {{value}}</ li >
{{/each-in}}
</ div >
< br />
{{/each}}
</ ul >
|
app/templates/each2.hbs
HTML
< Compact >
< h1 >
List of Student :
</ h1 >
</ Compact >
{{outlet}}
|
Output:
Ember.js Ember.Templates.helpers each-in() Method
Reference: https://api.emberjs.com/ember/4.4/classes/Ember.Templates.helpers/methods/debugger?anchor=each-in
Share your thoughts in the comments
Please Login to comment...