Ember.js EmberArray setEach() Method
Last Updated :
15 Sep, 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 setEach() method, for each member, sets the value of the named property.
Syntax:
setEach(key,value)
Parameters:
- key (string): The key to set.
- value (object): The value to set.
Returns: The resultant array.
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 serve
Example 1: Type the following code to generate the route for this example:
ember generate route details
app/routes/details.js
import Route from '@ember/routing/route' ;
export default class DetailsRoute extends Route {
details = [
{
'name' : 'Anubhav' ,
'mobile' : '1298119967' ,
'city' : 'Patna' ,
'country' : 'India' ,
'gender' : 'M' ,
'zipCode' : '800020'
},
{
'name' : 'Sakshi' ,
'mobile' : '1234567890' ,
'city' : 'Mumbai' ,
'country' : 'India' ,
'gender' : 'F' ,
'zipCode' : '400001'
},
{
'name' : 'Satyam' ,
'mobile' : '2222222222' ,
'city' : 'Delhi' ,
'country' : 'India' ,
'gender' : 'M' ,
'zipCode' : '110012'
},
{
'name' : 'Shivam' ,
'mobile' : '1122113322' ,
'city' : 'Bangalore' ,
'country' : 'India' ,
'gender' : 'M' ,
'zipCode' : '530068'
},
{
'name' : 'Ayushi' ,
'mobile' : '2244668800' ,
'city' : 'Jaipur' ,
'country' : 'India' ,
'gender' : 'F' ,
'zipCode' : '302001'
}
];
someMoreDetails = [
{
'name' : 'Yeshwant' ,
'mobile' : '1133557799' ,
'city' : 'Chennai' ,
'country' : 'India' ,
'gender' : 'M' ,
'zipCode' : '600001'
},
{
'name' : 'Siddhant' ,
'mobile' : '9911000000' ,
'city' : 'Mangalore' ,
'country' : 'India' ,
'gender' : 'M' ,
'zipCode' : '574142'
},
{
'name' : 'Khushi' ,
'mobile' : '8888888888' ,
'city' : 'Pune' ,
'country' : 'India' ,
'gender' : 'F' ,
'zipCode' : '111045'
}
];
city;
code;
model() {
return this .details;
}
setupController(controller, model) {
this ._super(controller, model);
controller.set( 'details' , this .details);
controller.set( 'someMoreDetails' , this .someMoreDetails);
controller.set( 'city' , this .city);
controller.set( 'code' , this .code);
}
}
|
app/controllers/details.js
import Ember from 'ember' ;
import { pushObjects, shiftObject,
setEach } from '@ember/array' ;
export default Ember.Controller.extend({
actions: {
checkCity(city) {
alert(`Contains Person from ${city}:
${ this .details.isAny( 'city' , city)? 'Yes' : 'No' }`);
},
checkCountry() {
alert(`All are
${ this .details.isEvery(
'country' , 'India' )? '' : 'not' } Indian`);
},
remove(){
this .details.shiftObject();
},
setZipCode(code){
this .details.setEach( 'zipCode' , code);
},
pushMoreDetails(){
this .details.pushObjects( this .someMoreDetails);
}
},
});
|
app/template/details.hbs
{{page-title "Details"}}
< h3 >List of People: </ h3 >
< br />< br />
< table >
< tr >
< th >Name</ th >
< th >Gender</ th >
< th >Mobile</ th >
< th >City</ th >
< th >Country</ th >
< th >Zip Code</ th >
</ tr >
{{#each @model as |detail|}}
< tr >
< td >{{detail.name}}</ td >
< td >{{detail.gender}}</ td >
< td >{{detail.mobile}}</ td >
< td >{{detail.city}}</ td >
< td >{{detail.country}}</ td >
< td >{{detail.zipCode}}</ td >
</ tr >
{{/each}}
</ table >
< br />< br />
< div >
< label >Enter City: </ label >
{{input value=this.city}}
</ div >
< div >
< input type = "button" id = "check-city" value = "Check City"
{{action 'checkCity' this.city}} />
</ div >
< br />< br />
< div >
< label >Enter Code: </ label >
{{input value=this.code}}
</ div >
< div >
< input type = "button" id = "set-code" value = "Set Zip Code"
{{action 'setZipCode' this.code}} />
</ div >
< br />< br />
< input type = "button" id = "remove-detail" value = "Remove"
{{action 'remove' }} />
< br />< br />
< input type = "button" id = "push-details" value = "Add More Details"
{{action 'pushMoreDetails' }} />
< br />< br />
< input type = "button" id = "check-country" value = "All Indian?"
{{action 'checkCountry' }} />
{{outlet}}
|
Output: Visit localhost:4200/details to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route websites
app/routes/websites.js
import Route from '@ember/routing/route' ;
export default class WebsitesRoute extends Route {
websites=[
{
'name' : 'Wikipedia' ,
'link' : 'www.wikipedia.com'
},
{
'name' : 'Facebook' ,
'link' : 'www.facebook.com'
},
{
'name' : 'Google' ,
'link' : 'www.google.com'
},
{
'name' : 'Twitter' ,
'link' : 'www.twitter.com'
}
];
moreWebsites = [
{
'name' : 'Instagram' ,
'link' : 'www.instagram.com'
},
{
'name' : 'Amazon' ,
'link' : 'www.amazon.com'
}
]
model() {
return this .websites;
}
setupController(controller, model) {
this ._super(controller, model);
controller.set( 'websites' , this .websites);
controller.set( 'moreWebsites' , this .moreWebsites);
}
}
|
app/controllers/websites.js
import Ember from 'ember' ;
import { pushObjects, setEach } from '@ember/array' ;
export default Ember.Controller.extend({
actions: {
set(){
this .websites.setEach( 'name' , 'GeeksforGeeks' );
this .websites.setEach( 'link' , 'www.geeksforgeeks.org' );
},
add(){
this .websites.pushObjects( this .moreWebsites);
}
},
});
|
app/template/websites.hbs
{{page-title "Websites"}}
< h3 >Websites</ h3 >
< br />< br />
< table >
< tr >
< th >Name</ th >
< th >Website Link</ th >
</ tr >
{{#each @model as |website|}}
< tr >
< td >{{website.name}}</ td >
< td >{{website.link}}</ td >
</ tr >
{{/each}}
</ table >
< br />< br />
< input type = "button" id = "add-website"
value = "More Websites" {{action 'add' }} />
< br />< br />
< input type = "button" id = "set-website"
value = "Click Here" {{action 'set' }} />
{{outlet}}
|
Output: Visit localhost:4200/websites to view the output
Reference: https://api.emberjs.com/ember/4.6/classes/EmberArray/methods/
Share your thoughts in the comments
Please Login to comment...