Ember.js MutableArray reverseObjects() Method
Last Updated :
24 Aug, 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 reverseObjects() method reverses the elements in the array.
Syntax:
reverseObjects()
Parameters: It takes no parameters.
Return Value: Reversed array.
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 details
app/routes/details.js
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: "Patna" ,
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" ,
},
];
city;
start;
end;
model() {
return this .details;
}
setupController(controller, model) {
super .setupController(controller, model);
controller.set( "details" , this .details);
controller.set( "someMoreDetails" , this .someMoreDetails);
controller.set( "city" , this .city);
controller.set( "start" , this .start);
controller.set( "end" , this .end);
}
}
|
app/controllers/details.js
import Ember from "ember" ;
import { any, slice, reverseObjects, rejectBy } from "@ember/array" ;
export default Ember.Controller.extend({
actions: {
checkCity(city) {
let res = this .details.any(
(person) => person.city == city);
alert(`Present: ${res ? "YES" : "NO" }`);
},
sliceItems(start, end) {
let tempItems = this .details.slice(start, end);
let str = "" ;
for (let i = 0; i < tempItems.length; i++)
str += tempItems[i].name + "\n" ;
alert(str);
},
reverse() {
this .set( "details" , this .details.reverseObjects());
},
getFemale() {
let tempItems = this .details.rejectBy( "gender" , "M" );
let str = "" ;
for (let i = 0; i < tempItems.length; i++)
str += tempItems[i].name + "\n" ;
alert(str);
},
pushMoreDetails() {
this .details.pushObjects( this .someMoreDetails);
},
},
});
|
app/template/details.js
{ { 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 City: </ label >
{{input value=this.city}}
</ div >
< div >
< input type = "button" id = "check-city"
value = "Check"
{{action 'checkCity' this.city}} />
</ 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-items"
value = "Slice Items"
{{action 'sliceItems' this.start this.end}} />
</ div >
< br />< br />
< input type = "button" id = "push-details"
value = "Add More Details"
{{action 'pushMoreDetails' }} />
< br />< br />
< input type = "button" id = "reverse"
value = "Reverse"
{{action 'reverse' }} />
< br />< br />
< input type = "button" id = "get-female"
value = "Get Female"
{{action 'getFemale' }} />
|
Output: Visit localhost:4200/details to view the output:
Example 2: Type the following code to generate the route for this example:
ember generate route party
app/routes/party.js
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);
}
}
|
app/controllers/party.js
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);
},
},
});
|
app/template/party.js
{{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:
Reference: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods
Share your thoughts in the comments
Please Login to comment...