Ember.js Ember.NativeArray uniq() Method
Last Updated :
28 Sep, 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 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.
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 the below command:
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.hbs
{{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.6/classes/Ember.NativeArray/methods
Share your thoughts in the comments
Please Login to comment...