Ember.js EmberArray Class

Last Updated : 20 Jan, 2023

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.

EmberArray Class: The EmberArray class implements Array-like behavior that is friendly to observers. Although it is not a concrete implementation, other classes that want to mimic arrays can make use of it. This class makes use of the MutableArray class, which enables observable changes to be done to the underlying array, in conjunction with the Array class.
This class specifies methods that give index-ordered access to a collection’s contents. The user should use these methods rather than Array primitives when writing code that has to accept any type of Array-like object since they will appropriately alert observers to changes to the array.

Methods: The following is the list of methods for this class:

any: This method is used to check if there are any objects in the target that matches the condition laid by the callback function.
compact: This method is used to make a copy of an array without null and undefined elements.
every: This method is used to check if all objects in the array pass a specific callback function.
filter: This method is used to filter objects in the array according to a specific condition.
filterBy: This method is used to return an array with just the items with the matched property.
find: This method is used to find elements that match the given callback function.
findBy: This method is to get the first item with a property matching the passed value.
forEach: This method is used to run a function on every item of the array.
getEach: This method is used to get all values in the array for a given key.
includes: This method is used to check if a given object is present in the array or not.
indexOf: This method is used to find the index of a given object in the array.
invoke: This method is used to call the passed method on every object in the receiver that implements it.
isAny: This method is used to check if for anyone the element in the array the passed property resolves to the desired value or not.
isEvery: This method is used to check if for each element in the array the passed property resolves to the desired value or not.
lastIndexOf: This method is used to find the last index of an object in the array.
map: This method is used to map all items in the array with a specific function.
mapBy: This method is used to get the value of the named property on all items in the list.
objectAt: This method is used to retrieve the object at a given index.
objectsAt: This method is used to fetch items for the given array of indices.
reduce: This method is used to combine the values of the array into a single value.
reject: This method provides a list of all the enumerated elements for which the provided function returns false.
rejectBy: This method returns an array containing the objects for which the given key’s value is false.
setEach: This method, for each member, sets the value of the named property.
slice: This method is used to return a new array that is a portion of the receiver.
sortBy: This method is used to sort an array by the specified key.
toArray: This method just transforms the object into a real array.
uniq: This method returns a brand-new array with just unique values in it.
uniqBy: This method is used to get objects which unique value for the given key.
without: This method gives back a new array without the given value.

Properties: The following is the list of the properties of this class:

[]: This property is used to get or set the array content.
firstObject: This property is used to retrieve the first object of the array.
lastObject: This property is used to retrieve the last object of the array.
length: This property is used to retrieve the length of the array.

Steps to Install and Run Ember.js:

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: In this example, I am going to use the properties: [], firstObject, lastObject and length, and the method: sortBy. Type the following code to generate the route for this example:

ember generate route richest-people

app/routes/richest-people.js

Javascript

import Route from '@ember/routing/route'; 
import { sortBy } from '@ember/array'; 
  
export default class RichestPeopleRoute extends Route { 
    richestPeople = [ 
        { 'name': 'mukesh ambani', 'net-worth': 90.7 }, 
        { 'name': 'jeff Bezos', 'net-worth': 148.1 }, 
        { 'name': 'Warren Buffet', 'net-worth': 99.3 }, 
        { 'name': 'Bill gates', 'net-worth': 104.7 }, 
        { 'name': 'elon Musk', 'net-worth': 253.4 }, 
        { 
            'name': 'gautam adani and family', 
            'net-worth': 115.8 
        }, 
        { 'name': 'Larry Page', 'net-worth': 93.4 }, 
        { 'name': 'larryEllison', 'net-worth': 103.3 }, 
        { 'name': 'sergeyBrin', 'net-worth': 89.9 }, 
        { 
            'name': 'bernard Arnault and family', 
            'net-worth': 157.1 
        }, 
    ]; 
    firstPerson; 
    lastPerson; 
    idx = 5; 
    randomPerson; 
    num; 
    model() { 
        this.richestPeople = 
            this.richestPeople.sortBy('net-worth'); 
  
        this.randomPerson = 
            this.richestPeople[this.idx - 1]; 
        return this.richestPeople; 
    } 
    setupController(controller, model) { 
        this._super(controller, model); 
        controller.set('idx', this.idx); 
        controller.set('firstPerson', 
            this.richestPeople.firstObject); 
        controller.set('lastPerson', 
            this.richestPeople.lastObject); 
        controller.set('randomPerson', 
            this.randomPerson); 
        controller.set('richestPeople', 
            this.richestPeople); 
        controller.set('num', 
            this.richestPeople.length); 
    } 
}

app/controllers/richest-people.js

Javascript

import Ember from 'ember'; 
  
export default Ember.Controller.extend({ 
    actions: { 
        setIdx(n) { 
            this.idx = parseInt(n); 
            this.set('randomPerson', 
                this.richestPeople[this.idx - 1]); 
        } 
    } 
})

app/template/richest-people.hbs

HTML

{{page-title "Richest People"}} 
<div> 
    <label>Enter Value (1-{{this.num}}):</label> 
      {{input value=this.idx}} 
</div> 
<div> 
    <input type="button" id="fetch" 
    value="Fetch" {{action "setIdx" this.idx}} /> 
</div> 
<br /> 
<div>First Person on the List: 
    {{this.firstPerson.name}} 
      ${{this.firstPerson.net-worth}}B 
</div> 
<br /> 
<div>Last Person on the List: 
    {{this.lastPerson.name}} 
      ${{this.lastPerson.net-worth}} 
     B 
</div> 
<br /> 
<div>Random Person on the List: 
    {{this.randomPerson.name}} 
      ${{this.randomPerson.net-worth}} 
      B 
</div> 
{{outlet}}

Output:

Example 2: In this example, I am going to use the methods: removeAt, unshiftObjects, objectAt, uniqBy and find. Type the following code to generate the route for this example:

ember generate route details

app/routes/details.js

Javascript

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: 'Bangalore', 
            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', 
        }, 
    ]; 
    start; 
    end; 
    idx; 
    model() { 
        return this.details; 
    } 
    setupController(controller, model) { 
        super.setupController(controller, model); 
        controller.set('details', this.details); 
        controller.set('someMoreDetails', 
            this.someMoreDetails); 
        controller.set('start', this.start); 
        controller.set('end', this.end); 
        controller.set('idx', this.idx); 
    } 
}

app/controllers/details.js

Javascript

import Ember from 'ember'; 
import { removeAt, unshiftObjects, objectAt, uniqBy, find } 
    from '@ember/array'; 
  
export default Ember.Controller.extend({ 
    actions: { 
        removeDetails(start, end) { 
            this.details.removeAt(start, end); 
        }, 
        addMoreDetails() { 
            this.details.unshiftObjects(this.someMoreDetails); 
        }, 
        getDetail(index) { 
            let foo = this.details.objectAt(index); 
            alert(foo.name); 
        }, 
        getFirstMaleAndFemalePerson() { 
            let foo = this.details.uniqBy('gender').toArray(); 
            let str = ""; 
            for (let i = 0; i < foo.length; i++) 
                str += foo[i].name + "\n"; 
            alert(str); 
        }, 
        getFirstMale() { 
            let foo = this.details.find((detail) => 
                detail.gender === 'M'); 
            alert(foo.name); 
        }, 
    }, 
});

app/template/details.hbs

HTML

{{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 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> 
<br /><br /> 
<input
    type="button"
      id="add-details"
      value="Add More Details"
      {{action "addMoreDetails"}} 
/> 
<br /><br /> 
<input
    type="button"
      id="all-male"
      value="Get First Male"
      {{action "getFirstMale"}} 
/> 
<br /><br /> 
<input
    type="button"
      id="get"
      value="Get"
      {{action "getFirstMaleAndFemalePerson"}} 
/> 
{{outlet}}