Ember.js ArrayProxy setObjects() 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 setObjects() method is used replace all the content of array with new content.
Syntax:
setObjects( objects );
Parameters:
- objects: It is the array of object which will be replace in place of old objects.
Return Value: EmberArray receiver with new content.
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 setObject1
- app/routes/setObject1.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/setObject1.js
Javascript
import Ember from 'ember' ; import { reverseObjects, unshiftObject, uniq, } 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.uniq(); this .partyItems.setObjects(res) }, }, }); |
- app/templates/setObject1.hbs
Javascript
{{page-title "setObjects" }} <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/setObject1 to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route setObject2
- app/routes/setObject2.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/setObject2.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/setObject2.hbs
Javascript
{{page-title "setObjects" }} <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 Begining" {{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/setObject2 to view the output
Reference: https://api.emberjs.com/ember/4.4/classes/ArrayProxy/methods/setObjects?anchor=setObjects