Ember.js MutableArray pushObject() 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 pushObject() method is used to push object into an array.
Syntax:
pushObject(obj)
Parameters:
- obj (Object): Object to push
Returns: Object that was passed as a parameter
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 notepad
app/routes/notepad.js
Javascript
import Route from '@ember/routing/route' ; export default class NotepadRoute extends Route { item; items = [ 'Bread' , 'Facewash' ]; model() { return this .items; } setupController(controller, model) { this ._super(controller, model); controller.set( 'items' , this .items); } } |
app/controllers/notepad.js
Javascript
import Ember from 'ember' ; import { pushObject } from '@ember/array' ; export default Ember.Controller.extend({ actions: { addItem(item) { console.log(item); this .items.pushObject(item); } } }) |
app/template/notepad.hbs
HTML
{{page-title "Notepad"}} < h2 >Your Items</ h2 > < div > < label >Enter Item: </ label > {{input value=this.item}} </ div > < div > < input type = "button" id = "add-item" value = "Add Item" {{action 'addItem' this.item}}/> </ div > < br />< br /> < ul > {{#each @model as |i|}} < li >{{i}}</ li > {{/each}} </ ul > {{outlet}} |
Output: Visit localhost:4200/notepad to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route languages
app/routes/languages.js
Javascript
import Route from '@ember/routing/route' ; import { classify, w } from '@ember/string' ; import { pushObject } from '@ember/array' ; export default class LanguagesRoute extends Route { name = `mandarin_Chinese spanish english Hindi bengali Portuguese russian japanese western_punjabi yueChinese`; num = `929.0 474.7 372.9 343.9 233.7 232.4 154.0 125.3 92.7 85.2` languages = []; initLanguages() { this .languages = []; this .name = w( this .name); this .num = w( this .num) for (let i = 0; i< this .name.length; i++) { let obj = new Object(); obj[ 'name' ] = classify( this .name[i]); obj[ 'num' ] = this .num[i]; this .languages.pushObject(obj); } } model() { this .initLanguages(); return this .languages; } } |
app/template/languages.hbs
Javascript
{{page-title "Languages" }} <h2>Most Spoken Languages in the World</h2> <table style= "border: 2px solid black;padding: 30px;" > <tr> <th>Language</th> <th>Native Speakers (millions)</th> </tr> {{ #each @model as |language|}} <tr> <td>{{language.name}}</td> <td>{{language.num}}</td> </tr> {{/each}} </table> {{outlet}} |
Output: Visit localhost:4200/languages to view the output
Reference: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods