Ember.js Ember.NativeArray removeAt() 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 removeAt() method is used to remove elements on a given index.
Syntax:
removeAt(start, len)
Parameters:
- start: Starting index.
- len: Length of the elements to be removed.
Return Value: Nothing
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 party
app/routes/party.js
Javascript
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" ,
];
item;
itemString;
itemList;
start;
end;
idx;
model() {
return this .partyItems;
}
setupController(controller, model) {
this ._super(controller, model);
controller.set( "partyItems" , this .partyItems);
controller.set( "item" , this .item);
controller.set( "itemString" , this .itemString);
controller.set( "itemList" , this .itemList);
controller.set( "start" , this .start);
controller.set( "end" , this .end);
controller.set( "idx" , this .idx);
}
}
|
app/controllers/party.js
Javascript
import Ember from "ember" ;
import {
without,
toArray,
unshiftObject,
unshiftObjects,
removeAt,
objectAt,
find,
replace,
uniq,
} from "@ember/array" ;
export default Ember.Controller.extend({
actions: {
withoutItem(item) {
console.log(item);
let tempItems;
tempItems = this .partyItems.without(item);
let str = "" ;
for (let i = 0; i < tempItems.length; i++)
str += tempItems[i] + "\n" ;
alert(str);
this .set( "item" , "" );
},
addItems(itemString) {
this .itemList = itemString.split( "," ).toArray();
if ( this .itemList.length == 1)
this .partyItems.unshiftObject( this .itemList[0]);
else this .partyItems.unshiftObjects( this .itemList);
this .set( "itemString" , "" );
},
removeItems(start, end) {
this .partyItems.removeAt(start, end);
},
getObject(idx) {
alert(
`The item at index ${idx} is
${ this .partyItems.objectAt(idx)}`
);
},
findMultipleWordItems() {
let reqItem = this .partyItems.find(
(item) => item.split( " " ).toArray().length > 1
);
alert(reqItem);
},
replaceItem(itemString) {
this .itemList = itemString.split( "," ).toArray();
if ( this .itemList.length >
this .partyItems.length) alert( "Error" );
this .partyItems.replace(0,
this .itemList.length, this .itemList);
},
getUniqueItems() {
let tempItems = this .partyItems.uniq();
let str = "" ;
for (let i = 0; i < tempItems.length; i++)
str += tempItems[i] + "\n" ;
alert(str);
this .set( "item" , "" );
},
},
});
|
app/template/party.hbs
HTML
{{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 Item: </ label >
{{input value=this.item}}
</ div >
< div >
< input
type = "button"
id = "remove-item"
value = "Remove Item"
{{action "withoutItem" this.item}}
/>
</ div >
< br />< br />
< div >
< label >Enter Items: </ label >
{{input value=this.itemString}}
</ div >
< div >
< input
type = "button"
id = "add-item"
value = "Add Items"
{{action "addItems" 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 = "remove-items"
value = "Remove Items"
{{action "removeItems" this.start this.end}}
/>
</ div >
< br />< br />
< div >
< label >Enter Index: </ label >
{{input value=this.idx}}
</ div >
< div >
< input
type = "button"
id = "get-item"
value = "Get Item"
{{action "getObject" this.idx}}
/>
</ div >
< br />< br />
< div >
< label >Enter Items: </ label >
{{input value=this.itemString}}
</ div >
< div >
< input
type = "button"
id = "replace-item"
value = "Replace Items"
{{action "replaceItem" this.itemString}}
/>
</ div >
< br />< br />
< input
type = "button"
id = "get-multiword"
value = "Get Multiword Items!"
{{action "findMultipleWordItems"}}
/>
< br />< br />
< input
type = "button"
id = "get-unique"
value = "Get Unique Items!"
{{action "getUniqueItems"}}
/>
{{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 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' ,
},
];
start;
end;
idx;
model() {
return this .details;
}
setupController(controller, model) {
super .setupController(controller, model);
controller.set( 'details' , this .details);
controller.set( 'someMoreDetails' , this .someMoreDetails);
controller.set( 'start' , this .start);
controller.set( 'end' , this .end);
controller.set( 'idx' , this .idx);
}
}
|
app/controllers/details.js
Javascript
import Ember from 'ember' ;
import { removeAt, unshiftObjects, objectAt, uniqBy, find }
from '@ember/array' ;
export default Ember.Controller.extend({
actions: {
removeDetails(start, end) {
this .details.removeAt(start, end);
},
addMoreDetails() {
this .details.unshiftObjects( this .someMoreDetails);
},
getDetail(index) {
let foo = this .details.objectAt(index);
alert(foo.name);
},
getFirstMaleAndFemalePerson() {
let foo = this .details.uniqBy( 'gender' ).toArray();
let str = "" ;
for (let i = 0; i < foo.length; i++)
str += foo[i].name + "\n" ;
alert(str);
},
getFirstMale() {
let foo = this .details.find(
(detail) => detail.gender === 'M' );
alert(foo.name);
},
},
});
|
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 Start Index: </ label >
{{input value=this.start}}
</ div >
< div >
< label >Enter End Index: </ label >
{{input value=this.end}}
</ div >
< div >
< input
type = "button"
id = "remove-details"
value = "Remove Details"
{{action "removeDetails" this.start this.end}}
/>
</ div >
< br />< br />
< div >
< label >Enter Index: </ label >
{{input value=this.idx}}
</ div >
< div >
< input
type = "button"
id = "get-detail"
value = "Get detail"
{{action "getDetail" this.idx}}
/>
</ div >
< br />< br />
< input
type = "button"
id = "add-details"
value = "Add More Details"
{{action "addMoreDetails"}}
/>
< br />< br />
< input
type = "button"
id = "all-male"
value = "Get First Male"
{{action "getFirstMale"}}
/>
< br />< br />
< input
type = "button"
id = "get"
value = "Get"
{{action "getFirstMaleAndFemalePerson"}}
/>
{{outlet}}
|
Output: Visit localhost:4200/details to view the output
Reference: https://api.emberjs.com/ember/4.6/classes/Ember.NativeArray/methods
Last Updated :
10 Oct, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...