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
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);
}
} |
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}`);
},
},
}); |
{{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
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)
}
} |
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)
},
},
}); |
{{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