Ember.js Ember.NativeArray pushObjects() Method
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 pushObjects() method is used to push multiple objects into an array.
Syntax:
pushObjects(obj)
Parameters:
- obj (Object): Objects to push.
Return Value: This method returns an object.
Steps to Install and Run Ember.js:
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
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
Javascript
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
Javascript
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
HTML
{{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
Javascript
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
Javascript
import Ember from 'ember' ; import { pushObjects, setEach } from '@ember/array' ; export default Ember.Controller.extend({ actions: { set(){ this .websites.setEach( 'name' , 'w3wiki' ); this .websites.setEach( 'link' , 'www.w3wiki.net' ); }, add(){ this .websites.pushObjects( this .moreWebsites); } }, }); |
app/template/websites.hbs
HTML
{{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/Ember.NativeArray/methods