Ember.js MutableArray Class

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.

MutableArray Class: The MutableArray class specifies the API for altering objects that resemble arrays. The methods supplied by this class can only be applied to objects that keep their items in an ordered fashion. It adds methods to alter the array and extends the Array mixin. It is crucial to modify arrays using the methods in this class so that changes can be seen. This makes it possible for Ember’s binding system to work properly.

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

• addObject: This method is used to push an object onto the end of the array if the object is not a present array.
• addObjects: This method is used to add a number of objects to the array.
• any: This method is used to check if there are any objects in the target that matches the condition laid by the callback function.
• clear: This method removes all the elements in the array
• 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.
• insertAt: This method is used to insert an object in a specific position 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.
• popObject: This method is used to pop objects from an array.
• pushObject: This method is used to push an object into an array.
• pushObjects: This method is used to push multiple objects into an array.
• 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.
• removeAt: This method is used to remove elements on a given index.
• removeObject: This method removes all instances of the object from the array.
• removeObjects: This removes each supplied item from the given array.
• replace: This method is used to replace some of the elements in the array with the given objects.
• reverseObjects: This method reverses the elements in the array.
• setEach: This method, for each member, sets the value of the named property.
• setObjects: This  method replaces all of the receiver’s content with the argument’s substance.
• shiftObject: This method shifts nil, if there are no more, or an object from the array’s beginning.
• 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.
• unshiftObject: This method is used to add a single object to the start of the array.
• unshiftObjects: This method is used to add objects to the front of the array.
• 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 demonstrate the use of the functions: isAny, isEvery, pushObjects, shiftObject and setEach. 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'
        }
    ];
    city;
    code;
    model() {
        return this.details;
    }
    setupController(controller, model) {
        this._super(controller, model);
        controller.set('details', this.details);
        controller.set('someMoreDetails', this.someMoreDetails);
        controller.set('city', this.city);
        controller.set('code', this.code);
    }
}

app/controllers/details.js

Javascript

import Ember from 'ember';
import { pushObjects, shiftObject, setEach } from '@ember/array';

export default Ember.Controller.extend({
    actions: {
        checkCity(city) {
            alert(`Contains Person from ${city}:
            ${this.details.isAny('city', city)?'Yes':'No'}`);
        },
        checkCountry() {
            alert(`All are
            ${this.details.isEvery('country', 'India')?'':'not'}
            Indian`);
        },
        remove(){
            this.details.shiftObject();
        },
        setZipCode(code){
            this.details.setEach('zipCode', code);
        },
        pushMoreDetails(){
            this.details.pushObjects(this.someMoreDetails);
        }
    },
});

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 City: </label>
    {{input value=this.city}}
</div>
<div>
    <input type="button" id="check-city"
        value="Check City" {{action 'checkCity' this.city}}/>
</div>
<br/><br/>
<div>
    <label>Enter Code: </label>
    {{input value=this.code}}
</div>
<div>
    <input type="button" id="set-code"
        value="Set Zip Code"
       {{action 'setZipCode' this.code}}/>
</div>
<br/><br/>
<input type="button" id="remove-detail"
    value="Remove"
    {{action 'remove'}}/>
<br/><br/>
<input type="button" id="push-details"
    value="Add More Details"
    {{action 'pushMoreDetails'}}/>
<br/><br/>
<input type="button" id="check-country"
    value="All Indian?"
    {{action 'checkCountry'}}/>
{{outlet}}

Output:

Example 2: In this example, I am going to use the methods: getEach, every, filter, forEach and map.

Type the following code to generate the route for this example:

ember generate route students

app/routes/students.js

Javascript

import Route from "@ember/routing/route";

export default class StudentsRoute extends Route {
    students = [
        {
            name: "Alix Mainston",
            gender: "F",
            class: 9,
            grade: "B",
            pocket_money: 9643,
        },
        {
            name: "Mufinella Lezemore",
            gender: "F",
            class: 10,
            grade: "A",
            pocket_money: 6960,
        },
        {
            name: "Sibylla Hanbridge",
            gender: "F",
            class: 8,
            grade: "D",
            pocket_money: 2272,
        },
        {
            name: "Wilow Lingwood",
            gender: "F",
            class: 8,
            grade: "A",
            pocket_money: 4279,
        },
        {
            name: "Estele MacIllrick",
            gender: "M",
            class: 9,
            grade: "E",
            pocket_money: 2579,
        },
        {
            name: "Israel Blackaller",
            gender: "M",
            class: 10,
            grade: "A",
            pocket_money: 9381,
        },
        {
            name: "Doralyn Sowerbutts",
            gender: "F",
            class: 12,
            grade: "A",
            pocket_money: 4933,
        },
        {
            name: "Lolly Boynes",
            gender: "F",
            class: 8,
            grade: "A",
            pocket_money: 1988,
        },
        {
            name: "Lucie Janowski",
            gender: "F",
            class: 11,
            grade: "F",
            pocket_money: 6185,
        },
        {
            name: "Camilla Ritelli",
            gender: "Bigender",
            class: 9,
            grade: "C",
            pocket_money: 1105,
        },
        {
            name: "Celene Enticknap",
            gender: "F",
            class: 9,
            grade: "A",
            pocket_money: 7186,
        },
        {
            name: "Hillier Buchanan",
            gender: "M",
            class: 12,
            grade: "A",
            pocket_money: 844,
        },
        {
            name: "Afton Povey",
            gender: "F",
            class: 9,
            grade: "F",
            pocket_money: 6633,
        },
        {
            name: "Flint Chesley",
            gender: "M",
            class: 9,
            grade: "B",
            pocket_money: 3835,
        },
        {
            name: "Sigfrid Copper",
            gender: "M",
            class: 8,
            grade: "D",
            pocket_money: 3883,
        },
        {
            name: "Barry Donnelly",
            gender: "M",
            class: 12,
            grade: "C",
            pocket_money: 4521,
        },
        {
            name: "Buck Polgreen",
            gender: "M",
            class: 8,
            grade: "C",
            pocket_money: 553,
        },
    ];
    model() {
        return this.students;
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set("students", this.students);
    }
}

app/controllers/students.js

Javascript

import Ember from "ember";

export default Ember.Controller.extend({
    actions: {
        getAllNames() {
            let tempItems = this.students.getEach("name");
            let str = "";
            for (let i = 0; i < tempItems.length; i++)
                str += tempItems[i] + "\n";
            alert(str);
        },
        allPass() {
            let res = this.students.every((student) =>
                student.grade != "F");
            alert(`${res ? "YES" : "NO"}`);
        },
        getFemale() {
            let tempItems = this.students.filter((student) =>
                student.gender === "F");
            let str = "";
            for (let i = 0; i < tempItems.length; i++)
                str += tempItems[i].name + "\n";
            alert(str);
        },
        changeGrade() {
            this.students.forEach((student) =>
                Ember.set(student, "grade", "A"));
        },
        increasePocketMoney() {
            this.students.map((student) =>
                Ember.set(student, "pocket_money",
                    student.pocket_money + 1000)
            );
        },
    },
});

app/template/students.hbs

HTML

{{page-title "Students"}}
<h3>List of Students: </h3>
<br /><br />
<table>
    <tr>
        <th>Name</th>
        <th>Class</th>
        <th>Gender</th>
        <th>Grade</th>
        <th>Pocket Money</th>
      </tr>
      {{#each @model as |student|}}
        <tr>
              <td>{{student.name}}</td>
              <td>{{student.class}}</td>
              <td>{{student.gender}}</td>
              <td>{{student.grade}}</td>
              <td>{{student.pocket_money}}</td>
        </tr>
      {{/each}}
</table>
<br /><br />
<input
    type="button"
      id="get-all"
      value="Get All Names"
      {{action "getAllNames"}}
/>
<br /><br />
<input
    type="button"
      id="all-pass"
      value="Did Everyone Pass?"
      {{action "allPass"}}
/>
<br /><br />
<input
    type="button"
      id="get-female"
      value="Get Female"
      {{action "getFemale"}}
/>
<br /><br />
<input
    type="button"
      id="increase-pocket-money"
      value="Increase Pocket Money"
      {{action "increasePocketMoney"}}
/>
<br /><br />
<input
    type="button"
      id="change-grade"
      value="Change Grade"
      {{action "changeGrade"}}
/>
{{outlet}}

Output:

Reference: https://api.emberjs.com/ember/release/classes/MutableArray