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 removeObject() method removes all instances of the object from the array.
Syntax:
removeObject(obj)
Parameters:
- obj: The object to remove.
Return Value: New array.
To run the following examples, you 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 party
import Route from "@ember/routing/route" ;
export default class PartyRoute extends Route {
partyItems = [
"Digital Camera" ,
"Jugs, cups & straws" ,
"Balloons" ,
"Scissors" ,
"Cold Drink" ,
"Table Confetti" ,
"Party Hats" ,
"Wine" ,
"Napkins" ,
"Party Plates" ,
"Speakers" ,
"Music System" ,
"Cups" ,
];
itemString;
itemList;
start;
end;
helper(itemString) {
this .itemList = itemString.split( "," );
for (let i = 0; i < this .itemList.length; i++)
this .itemList[i] = this .itemList[i].trim();
return this .itemList;
}
model() {
return this .partyItems;
}
setupController(controller, model) {
this ._super(controller, model);
controller.set( "helper" , this .helper);
controller.set( "partyItems" , this .partyItems);
controller.set( "itemString" , this .itemString);
controller.set( "itemList" , this .itemList);
controller.set( "start" , this .start);
controller.set( "end" , this .end);
}
} |
import Ember from 'ember' ;
import { objectsAt, removeObject, removeObjects,
slice, reverseObjects, setObjects, reject
} from '@ember/array' ;
export default Ember.Controller.extend({
actions: {
getItems(itemString) {
this .itemList = this .helper(itemString);
for (let i = 0; i < this .itemList.length; i++)
this .itemList[i] = parseInt( this .itemList[i]);
let tempItems =
this .partyItems.objectsAt( this .itemList);
let str = '' ;
for (let i = 0; i < tempItems.length; i++)
str += tempItems[i] + '\n' ;
alert(str);
},
removeItems(itemString) {
this .itemList = this .helper(itemString);
if ( this .itemList.length == 1)
this .partyItems.removeObject( this .itemList[0]);
else
this .partyItems.removeObjects( this .itemList);
this .set( 'itemString' , '' );
},
sliceItems(start, end) {
let tempItems = this .partyItems.slice(start, end);
let str = '' ;
for (let i = 0; i < tempItems.length; i++)
str += tempItems[i] + '\n' ;
alert(str);
},
reverseItems() {
this .set( 'partyItems' ,
this .partyItems.reverseObjects());
},
replaceItems(itemString) {
this .partyItems.setObjects( this .helper(itemString));
},
findMultiwordItems() {
let reqItem = this .partyItems.reject((item) =>
item.split( ' ' ).toArray().length == 1);
alert(reqItem);
}
},
}); |
{{page-title "Party"}} < h3 >Here is a list of items: </ h3 >
< ul >
{{#each @model as |party|}}
< li >{{party}}</ li >
{{/each}}
</ ul >
< br />< br />
< div >
< label >Enter Items: </ label >
{{input value=this.itemString}}
</ div >
< div >
< input type = "button" id = "remove-item" value = "Remove Items" {{action 'removeItems' this.itemString}} />
</ div >
< br />< br />
< div >
< label >Enter Start Index: </ label >
{{input value=this.start}}
</ div >
< div >
< label >Enter End Index: </ label >
{{input value=this.end}}
</ div >
< div >
< input type = "button" id = "slice" value = "Slice" {{action 'sliceItems' this.start this.end}} />
</ div >
< br />< br />
< div >
< label >Enter Indices: </ label >
{{input value=this.itemString}}
</ div >
< div >
< input type = "button" id = "get-item" value = "Get Items" {{action 'getItems' this.itemString}} />
</ div >
< br />< br />
< div >
< label >Enter Items: </ label >
{{input value=this.itemString}}
</ div >
< div >
< input type = "button" id = "replace-item" value = "Replace Items" {{action 'replaceItems' this.itemString}} />
</ div >
< br />< br />
< input type = "button" id = "reverse-items" value = "Reverse" {{action 'reverseItems' }} />
< br />< br />
< input type = "button" id = "find-items" value = "Find" {{action 'findMultiwordItems' }} />
{{outlet}} |
Output: Visit localhost:4200/party to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route movie
import Route from '@ember/routing/route' ;
export default class MovieRoute extends Route {
movies = [
'The Shawshank Redemption' ,
'The Godfather' ,
'The Dark Knight' ,
'Schindler\'s List' ,
'The Godfather Part II' ,
'12 Angry Men' ,
'Pulp Fiction ' ,
'Raging Bull' ,
'Parasite' ,
'Se7en' ,
'3 Idiots' ,
'Forrest Gump' ,
'The Green Mile'
]
itemString;
itemList;
helper(itemString) {
this .itemList = itemString.split( ',' );
for (let i = 0; i < this .itemList.length; i++)
this .itemList[i] = this .itemList[i].trim();
return this .itemList;
}
model() {
return this .movies;
}
setupController(controller, model) {
super .setupController(controller, model);
controller.set( 'helper' , this .helper);
controller.set( 'movies' , this .movies);
controller.set( 'itemString' , this .itemString);
controller.set( 'itemList' , this .itemList);
}
} |
import Ember from 'ember' ;
import { objectsAt, removeObject, removeObjects, setObjects, reject } from '@ember/array' ;
export default Ember.Controller.extend({
actions: {
getItems(itemString) {
this .itemList = this .helper(itemString);
for (let i = 0; i < this .itemList.length; i++)
this .itemList[i] = parseInt( this .itemList[i]);
let tempItems = this .movies.objectsAt( this .itemList);
let str = '' ;
for (let i = 0; i < tempItems.length; i++)
str += tempItems[i] + '\n' ;
alert(str);
},
removeItems(itemString) {
this .itemList = this .helper(itemString);
if ( this .itemList.length == 1)
this .movies.removeObject( this .itemList[0]);
else this .movies.removeObjects( this .itemList);
this .set( 'itemString' , '' );
},
replaceItems(itemString) {
this .movies.setObjects( this .helper(itemString));
},
findSingleWordItems() {
let reqItem = this .movies.reject(
(item) => item.split( ' ' ).toArray().length > 1
);
alert(reqItem);
},
},
}); |
{{page-title "Movie"}} < h3 >Here is a list of Movies: </ h3 >
< ul >
{{#each @model as |movie|}}
< li >{{movie}}</ li >
{{/each}}
</ ul >
< br />< br />
< div >
< label >Enter Movies: </ label >
{{input value=this.itemString}}
</ div >
< div >
< input type = "button" id = "remove-item" value = "Remove Movie" {{action 'removeItems' this.itemString}}/>
</ div >
< br />< br />
< div >
< label >Enter Indices: </ label >
{{input value=this.itemString}}
</ div >
< div >
< input type = "button" id = "get-item" value = "Get Movies"
{{action 'getItems' this.itemString}}/>
</ div >
< br />< br />
< div >
< label >Enter Movies: </ label >
{{input value=this.itemString}}
</ div >
< div >
< input type = "button" id = "replace-item" value = "Replace Movies" {{action 'replaceItems' this.itemString}}/>
</ div >
< br />< br />
< input type = "button" id = "find-items" value = "Find" {{action 'findSingleWordItems'}}/>
{{outlet}} |
Output: Visit localhost:4200/movie to view the output
Reference: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods