Ember.js MutableArray popObject() 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 popObject() method is used to pop objects from an array.
Syntax:
popObject()
Returns: Object popped
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 { items = [ 'Bread' , 'Facewash' , 'Egg' , 'Pen' , 'Medicine' ]; 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 { popObject } from '@ember/array' ; export default Ember.Controller.extend({ actions: { removeItem() { if ( this .items.length == 0) alert( 'Item List is Empty' ); this .items.popObject(); } } }) |
app/template/notepad.hbs
HTML
{{page-title "Notepad"}} < h2 >Your Items</ h2 > < ul > {{#each @model as |i|}} < li >{{i}}</ li > {{/each}} </ ul > < br />< br /> < div > < input type = "button" id = "remove-item" value = "Remove Item" {{action 'removeItem'}}/> </ div > {{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 richest-people
app/routes/richest-people.js
Javascript
import Route from '@ember/routing/route' ; import { classify, w } from '@ember/string' ; export default class RichestPeopleRoute extends Route { richestPeople = [ 'elon Musk' , 'bernard Arnault and family' , 'jeff Bezos' , 'Bill gates' , 'gautam adani and family' , 'Larry Page' , 'Warren Buffet' , 'larry Ellison' , 'mukesh ambani' , 'sergey brin' ]; num = 10; init() { this .richestPeople = this .richestPeople.map(classify); } model() { this .init(); return this .richestPeople; } setupController(controller, model) { this ._super(controller, model); controller.set( 'num' , this .num); controller.set( 'richestPeople' , this .richestPeople) } } |
app/controllers/richest-people.js
Javascript
import Ember from 'ember' ; import { popObject } from '@ember/array' ; export default Ember.Controller.extend({ actions: { set(n) { this .num = parseInt(n); while ( this .richestPeople.length > this .num) { this .richestPeople.popObject(); } } } }) |
app/template/richest-people.hbs
HTML
{{page-title "Richest People"}} < div > < label >Enter Value: </ label > {{input value=this.num}} </ div > < div > < input type = "button" id = "fetch" value = "Fetch" {{action 'set' this.num}}/> </ div > < br />< br /> < h2 >Top {{this.num}} Richest People in the World</ h2 > < ul > {{#each @model as |rich-person|}} < li >{{rich-person}}</ li > {{/each}} </ ul > {{outlet}} |
Output: Visit localhost:4200/richest-people to view the output
Reference: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods