Ember.js MutableArray addObjects() Method
Last Updated :
12 Sep, 2022
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which are 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 addObject() method is used to add each object into the array.
Syntax:
addObjects( objects );
Property:
- objects: It is the objects to add in array.
Return Value: It returned the EmberArray receiver.
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
Now you can create the project by typing in the following piece of code:
ember new <project-name> --lang en
Step 2: To start the server, type:
ember serve
Example 1: Type the following code to generate the route for this example:
ember generate route addObjects
app/routes/add-objects.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/add-objects.js
import Ember from 'ember' ;
import { pushObjects, setEach } from '@ember/array' ;
export default Ember.Controller.extend({
actions: {
add() {
this .websites.addObjects( this .moreWebsites);
}
},
});
|
app/templates/add-objects.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" }} />
{{outlet}}
|
Output: Visit localhost:4200/addObjects to view the output
Ember.js MutableArray addObjects
Example 2: Type the following code to generate the route for this example:
ember generate route addObjects1
app/routes/add-objects1.js
import Route from '@ember/routing/route' ;
export default class DetailsRoute extends Route {
details = [
{
name: 'Aaksh' ,
mobile: '9811129967' ,
city: 'Delhi' ,
country: 'India' ,
gender: 'M' ,
zipCode: '800020' ,
},
{
name: 'Sweta' ,
mobile: '9456712890' ,
city: 'Mumbai' ,
country: 'India' ,
gender: 'F' ,
zipCode: '400001' ,
},
{
name: 'Satyam' ,
mobile: '2222222222' ,
city: 'Raipur' ,
country: 'India' ,
gender: 'M' ,
zipCode: '110012' ,
},
{
name: 'Shandya' ,
mobile: '1122113322' ,
city: 'Bangalore' ,
country: 'India' ,
gender: 'F' ,
zipCode: '530068' ,
},
{
name: 'Ayushi' ,
mobile: '2244668800' ,
city: 'Thana' ,
country: 'India' ,
gender: 'F' ,
zipCode: '302001' ,
},
];
someMoreDetails = [
{
name: 'Yogesh' ,
mobile: '1133557799' ,
city: 'Chennai' ,
country: 'India' ,
gender: 'F' ,
zipCode: '600001' ,
},
{
name: 'Sunny' ,
mobile: '9911000000' ,
city: 'Masore' ,
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) {
super .setupController(controller, model);
controller.set( 'details' , this .details);
controller.set( 'someMoreDetails' , this .someMoreDetails);
controller.set( 'city' , this .city);
controller.set( 'code' , this .code);
}
}
|
app/controllers/add-objects1.js
import Ember from 'ember' ;
import { addObjects, 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' }`);
},
remove() {
this .details.shiftObject();
},
pushMoreDetails() {
this .details.addObjects( this .someMoreDetails);
},
},
});
|
app/template/add-objects1.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 />
<input type= "button" id= "remove-detail"
value= "Remove" {{action "remove" }} />
<br /><br />
<input
type= "button"
id= "push-details"
value= "Add More Details"
{{action "pushMoreDetails" }}
/>
{{outlet}}
|
Output: Visit localhost:4200/addObjects1 to view the output
Ember.js MutableArray addObjects
Reference: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods/addObjects?anchor=addObjects
Share your thoughts in the comments
Please Login to comment...