Ember.js EmberArray objectAt() 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 objectAt() method is used to retrieve the object at a given index. If we used a negative number or number which is greater than the size of the Array then this method returns undefined.
Syntax:
objectAt(index)
Parameters:
- index: It is the index of elements that we want.
Return Value: Item at the index.
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:
ember serve
Example 1: Type the following code to generate the route for this example:
ember generate route objectAt1
app/routes/objectAt1.js
import Route from '@ember/routing/route' ; class student { name = null ; gender = null ; class = null ; grade = null ; constructor(name, gender, class, grade) { this .name = name; this .gender = gender; this .class = class; this .grade = grade } show_grade() { return `I am ${ this .name} of Class ${ this .class} Get ${ this .grade}`; } } export default class StudentsRoute extends Route { students = [ new student( 'Aakash' , 'M' , 10, 'A' ,), new student( 'Soniya' , 'F' , 8, 'C' ), new student( 'Esnoor' , 'M' , 9, 'C' ), new student( 'Isha' , 'F' , 11, 'B' ,), new student( 'Doman' , 'M' , 12, 'B' ), new student( 'Lolu' , 'M' , 10, 'A' ), new student( 'Satyam' , 'M' , 10, 'A' ), ]; temp2; temp; model() { return this .students; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'students' , this .students); controller.set( 'temp' , this .temp); controller.set( 'temp1' , this .temp1); controller.set( 'temp2' , this .temp2); } } |
app/controllers/objectAt1.js
import Ember from 'ember' ; import { mapBy } from '@ember/array' ; export default Ember.Controller.extend({ actions: { removeDetails(start,end) { this .students.removeAt(start,end); }, getDetail(index) { let foo = this .students.objectAt(index); alert(`${foo.name} of class ${foo.class}`); }, }, }); |
app/templates/objectAt1.hbs
{{page-title "Student" }} <h3>List of Students: </h3> <br /><br /> <table> <tr> <th>Name</th> <th>Gender </th> <th>Class </th> <th>Grade </th> </tr> {{ #each @model as |detail|}} <tr> <td>{{detail.name}}</td> <td> {{detail.gender}}</td> <td>{{detail.class}}</td> <td>{{detail.grade}}</td> </tr> {{/each}} </table> <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-details" value= "Remove Details" {{action "removeDetails" this .start this .end}} /> </div> <br /><br /> <div> <label>Enter Index: </label> {{input value= this .idx}} </div> <div> <input type= "button" id= "get-detail" value= "Get detail" {{action "getDetail" this .idx}} /> </div> {{outlet}} |
Output: Visit localhost:4200/objectAt1 to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route objectAt2
app/routes/objectAt2.js
import Route from '@ember/routing/route' ; import { } from '@ember/array' ; export default class FruitsRoute extends Route { item1 = [ 'a' , 'b' , 'c' , 'd' , 'e' , 'f' , 'g' ] item2 = [ 'l' , 'm' , 'h' , 'i' , 'j' , 'k' ]; model() { return this .item1; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'item1' , this .item1); controller.set( 'item2' , this .item2) } } |
app/controllers/objectAt2.js
import Ember from 'ember' ; import { removeAt, unshiftObjects, objectAt, uniqBy, find } from '@ember/array' ; export default Ember.Controller.extend({ actions: { Show_item(start, end) { let foo = this .item1.objectAt(start); alert(foo); }, Push_item() { this .item1.pushObjects( this .item2) }, }, }); |
app/templates/objectAt2.hbs
{{page-title "Fruits" }} <table style= " border-spacing : 30px" > <h3>Here is a list 1: </h3> <ul> {{ #each @model as |item|}} <li>{{item}}</li> {{/each}} </ul> </table> <div> <label>Enter Start Index: </label> {{input value= this .start}} </div> <div> <input type= "button" id= "show-details" value= "Show Items" {{action 'Show_item' this .start}} /> </div> <br /><br /> <input type= "button" id= "push-item" value= "Push More Items" {{action 'Push_item' }} /> {{outlet}} |
Output: Visit localhost:4200/objectAt2 to view the output
Reference: https://api.emberjs.com/ember/2.14/classes/Ember.Array/methods/objectAt?anchor=objectAt
Contact Us