Ember.js EmberArray slice() 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 slice() method is used to return a new array that is a portion of the receiver.
Syntax:
slice(begin,end)
Parameters:
- begin: Starting index.
- end: Ending index.
Returns: Portion of the receiver between begin and end.
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 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.hbs
{{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.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 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.6/classes/EmberArray/methods/