Ember.js MutableArray addObjects() Method
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
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
Reference: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods/addObjects?anchor=addObjects
Contact Us