Ember.js MutableArray uniq() 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 uniq() method returns a brand-new array with just unique values in it.
Syntax:
uniq()
Parameters: It doesn’t take any parameters.
Return Value: Array with unique elements.
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
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
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.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 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 notepad
app/routes/notepad.js
import Route from '@ember/routing/route' ; export default class NotepadRoute extends Route { items = []; item; model() { return this .items; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'items' , this .items); } } |
app/controllers/notepad.js
import Ember from 'ember' ; import { pushObject } from '@ember/array' ; export default Ember.Controller.extend({ actions: { withoutItem(item) { let tempItems; tempItems = this .items.without(item); let str = '' ; for (let i = 0; i < tempItems.length; i++) str += tempItems[i] + '\n' ; alert(str); this .set( 'item' , '' ); }, replaceItem(item) { let itemList = item.split( ',' ).toArray(); if (itemList.length > this .items.length) alert( 'Error' ); this .items.replace(0, itemList.length, itemList); }, addItem(item) { this .items.unshiftObject(item); }, getUniqueItems() { let tempItems = this .items.uniq(); let str = '' ; for (let i = 0; i < tempItems.length; i++) str += tempItems[i] + '\n' ; alert(str); this .set( 'item' , '' ); }, }, }); |
app/template/notepad.hbs
{{page-title "Notepad"}} < h2 >Notepad</ h2 > < div > < label >Enter Item: </ label > {{input value=this.item}} </ div > < div > < input type = "button" id = "add-item" value = "Add Item" {{action 'addItem' this.item}} /> </ div > < br />< br /> < ul > {{#each @model as |item|}} < li >{{item}}</ li > {{/each}} </ ul > < br />< br /> < div > < label >Enter Item: </ label > {{input value=this.item}} </ div > < div > < input type = "button" id = "without-item" value = "Without Item" {{action 'withoutItem' this.item}} /> </ div > < br />< br /> < div > < label >Enter Item: </ label > {{input value=this.item}} </ div > < div > < input type = "button" id = "replace-item" value = "Replace Item" {{action 'replaceItem' this.item}} /> </ div > < br />< br /> < input type = "button" id = "get-unique" value = "Get Unique Items!" {{action 'getUniqueItems' }} /> {{outlet}} |
Output: Visit localhost:4200/notepad to view the output
Reference: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods