Ember.js Ember.NativeArray indexOf() 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 indexOf() method is used find the first occurrence of passed object in array.
Syntax:
indexOf( object, startAt );
Parameters:
- object: It is the object whose occurrence we want.
- startAt: It is the index number from where to start looking.
Return Value: index or -1 if not found.
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 indexOf1
app/routes/indexOf1.js
Javascript
import Route from '@ember/routing/route' ; export default class PartyRoute extends Route { partyItems = [ 'Oxygen' , 'The Thing' , 'Source Code' , 'Infine' , 'Ad Astra' , 'Tenet' , 'SpiderHead' , 'The Thing' , 'A Quiet Place' , 'The Invisible Man' , 'Looper' , 'Infine' , 'Ad Astra' ]; item; idx; len; 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( 'len' , this .len); } } |
app/controllers/indexOf1.js
Javascript
import Ember from 'ember' ; import { } from '@ember/array' ; export default Ember.Controller.extend({ actions: { check_index(item) { let temp = this .partyItems.indexOf(item); alert(`Index of Movie is ${temp}`); }, check_movie(item) { let temp = this .partyItems.includes(item); alert(temp ? 'Movie is present in watch list' : 'Movie is not Present in watch list' ); }, check_last(item) { let temp = this .partyItems.lastIndexOf(item); alert(`Last Index of Movie is ${temp}`); }, }, }); |
app/templates/indexOf1.hbs
Javascript
{{page-title "indexOf" }} <h3>Here is a list of items: </h3> <ul> {{ #each @model as |party|}} <li>{{party}}</li> {{/each}} </ul> <br /><br /> <div> <label>Enter Movie: </label> {{input value= this .temp}} </div> <input type= "button" id= "find-Index" value= "Find Movie Index" {{action "check_index" this .temp}} /> <br /><br /> <div> <label>Enter Movie: </label> {{input value= this .temp1}} </div> <input type= "button" id= "check-movie" value= "Check Movie" {{action "check_movie" this .temp1}} /> <br /><br /> <div> <label>Enter Item: </label> {{input value= this .temp2}} </div> <input type= "button" id= "check-last" value= "Check Last Index of Movie" {{action "check_last" this .temp2}} /> {{outlet}} |
Output: Visit localhost:4200/indexOf1 to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route indexOf2
app/routes/indexOf2.js
Javascript
import Route from "@ember/routing/route" ; export default class StudentsRoute extends Route { partyItems = [ 'Digital Camera' , 'Jugs, cups & straws' , 'Balloons' , 'Cups' , 'Scissors' , 'Cold Drink' , 'Table Confetti' , 'Party Hats' , 'Wine' , 'Napkins' , 'Scissors' , 'Party Plates' , 'Speakers' , 'Music System' , 'Cold Drink' , 'Cups' , 'Wine' , ]; len; model() { return this .partyItems; } setupController(controller, model) { super .setupController(controller, model); controller.set( "partyItems" , this .partyItems); controller.set( "len" , this .len); controller.set( "item" , this .item); } } |
app/controllers/indexOf2.js
Javascript
import Ember from "ember" ; export default Ember.Controller.extend({ actions: { last_index(data) { let ans = this .partyItems.lastIndexOf(data); alert(`Last Index of item is ${ans}`); }, check_items(data) { let temp = this .partyItems.includes(data) alert(temp ? "Item is present in list" : "Item is not Present in list" ) }, find_index(data) { let temp = this .partyItems.indexOf(data); alert(`Index of ${data} is ${temp}`) }, }, }); |
app/templates/indexOf2.hbs
Javascript
{{page-title "indexOf" }} <h3>List of Items: </h3> <table> <ul> {{ #each @model as |student|}} <li>{{student}}</li> {{/each}} </ul> </table> <br /><br /> <div> <label>Enter Item: </label> {{input value= this .temp}} </div> <input type= "button" id= "check-atIndex" value= "Check Item" {{action "check_items" this .temp}} /> <br /><br /> <div> <label>Enter Item: </label> {{input value= this .temp1}} </div> <input type= "button" id= "find-Index" value= "Find Index Of Item" {{action "find_index" this .temp1}} /> <br /><br /> <div> <label>Enter Item: </label> {{input value= this .temp2}} </div> <input type= "button" id= "find-last" value= "Find last Index" {{action "last_index" this .temp2}} /> {{outlet}} |
Output: Visit localhost:4200/indexOf2 to view the output
Reference: https://api.emberjs.com/ember/4.4/classes/Ember.NativeArray/methods/indexOf?anchor=indexOf
Contact Us