Ember.js ArrayProxy reverseObjects() 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 reverseObjects() method is used reverse object in the array.
Syntax:
reverseObjects( );
Parameters: It doesn’t take any argument.
Return Value: EmberArray receiver.
Steps to Install and Run Ember.js:
Step 1: 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
Step 2: 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 reverseObject1
app/routes/reverseObject1.js
Javascript
import Route from '@ember/routing/route' ; export default class PartyRoute extends Route { partyItems = [ 'Oxygen' , 'Tenet' , 'Source Code' , 'Infine' , 'Loopert' , 'Tenet' , 'SpiderHead' , 'The Thing' , 'A Quiet Place' , 'The Invisible Man' , 'Looper' , 'The Thing' , 'Ad Astra' ]; temp = [ 'Shutter Island' , 'Matrix' , 'Avatar' , 'Fantastic Beast' , 'Avengers' , 'Fantastic four' , 'HulK' , 'Superman' , 'Spiderman' , 'The Batman' ]; item; idx; model() { return this .partyItems; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'partyItems' , this .partyItems); controller.set( 'item' , this .item); controller.set( 'idx' , this .idx); controller.set( 'temp' , this .temp); } } |
app/controllers/reverseObject1.js
Javascript
import Ember from 'ember' ; import { reverseObjects, unshiftObject, unique, } from '@ember/array' ; export default Ember.Controller.extend({ actions: { invert() { this .partyItems.reverseObjects( ); }, insert_first(data) { this .partyItems.unshiftObject(data); }, remove_d() { let res = this .partyItems.unique(); this .partyItems.setObjects(res) }, }, }); |
app/templates/reverseObject1.hbs
Javascript
{{page-title "reverseObjecets" }} <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= "insert-beginning" value= "Insert at Beginning" {{action "insert_first" this .item}} /> </div> <br /> <input type= "button" id= "reverse_list" value= "Reverse List" {{action "invert" }} /> <br /><br /> <input type= "button" id= "remove-duplicates" value= "Remove duplicates" {{action "remove_d" }} /> {{outlet}} |
Output: Visit localhost:4200/reverseObject1 to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route reverseObject2
- app/routes/reverseObject2.js
Javascript
import Route from '@ember/routing/route' ; export default class ListRoute extends Route { list = [ "Digital Camera" , "Speakers" , "Balloons" , "Scissors" , "Cups" , "Table Confetti" , "Scissors" , "Wine" , "Napkins" , "Party Plates" , "Speakers" , "Music System" , "Cups" ,]; item; idx; model() { return this .list; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'list' , this .list); controller.set( 'item' , this .item); controller.set( 'idx' , this .idx); } } |
- app/controllers/reverseObject2.js
Javascript
import Ember from 'ember' ; import { reverseObjects, uniq, setObjects, unshiftObject } from '@ember/array' ; export default Ember.Controller.extend({ actions: { reverse() { this .list.setObjects( this .list.reverseObjects()); }, remove_d() { let k = this .list.uniq(); this .list.setObjects(k); }, add_first(item) { this .list.unshiftObject(item); }, }, }); |
- app/templates/reverseObject2.hbs
Javascript
{{page-title "reverseObjects" }} <h3>Here is a list of Items: </h3> <ul> {{ #each @model as |i|}} <li>{{i}}</li> {{/each}} </ul> <br /> <div> <label>Enter Item: </label> {{input value= this .item}} </div> <div> <input type= "button" id= "insert-item" value= "Insert at Beginning" {{action "add_first" this .item}} /> </div> <br /> <input type= "button" id= "remove-duplicates" value= "Remove duplicates" {{action "remove_d" }} /> <br /><br /> <input type= "button" id= "reverse_list" value= "Reverse List" {{action "reverse" }} /> {{outlet}} |
Output: Visit localhost:4200/reverseObject2 to view the output
Reference: https://api.emberjs.com/ember/4.4/classes/ArrayProxy/methods/reverseObjects?anchor=reverseObjects