Ember.js MutableArray popObject() Method
Last Updated :
20 Jul, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...