Ember.js ArrayProxy clear() 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 clear()  method is used to remove all the elements from an array.

Syntax:

clear( Array );

Property:

• Array: It is an array whose element we want to remove.

Return Value: It returns an empty 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: Type the following code to generate the route for this example:

ember generate route clear1

app/routes/clear1.js

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

export default class WebsitesRoute extends Route {
    food = [
        {
            food: 'apple',
            quant: 1.5,
            Bucket: 1,
        },
        {
            food: 'Potato',
            quant: 3,
            Bucket: 2,
        },
        {
            food: 'Banana',
            quant: 2,
            Bucket: 1,
        },
        {
            food: 'grapes',
            quant: 3,
            Bucket: 2,
        },
        {
            food: 'Orange',
            quant: 2,
            Bucket: 1,
        },
        {
            food: 'Pine-apple',
            quant: 1,
            Bucket: 2,
        },
        {
            food: 'bean',
            quant: 3,
            Bucket: 2,
        },
    ];
    temp;
    model() {
        return this.food;
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set('food', this.food);
        controller.set('temp', this.temp);
        controller.set('temp2', this.temp2);
    }
}

app/controllers/clear1.js

import Ember from 'ember';
import { reduce, clear } from '@ember/array';

export default Ember.Controller.extend({
    actions: {
        show_item() {
            let foo = this.food.reduce((acc, item) =>
                acc + item.food + '\n', '');
            alert(foo);

        },
        remove() {
            this.food.clear();

        },
    },
});

app/templates/clear1.hbs

{{page-title "invoke"}}
<h2>List of Item with Quantity </h2>
<table>
    <tr>
        <th>Name</th>
        <th>Quantity</th>
        <th>Bucket</th>
      </tr>
      {{#each @model as |Eatable|}}
    <tr>
          <td>{{Eatable.food}}</td>
          <td>{{Eatable.quant}}</td>
          <td>{{Eatable.Bucket}}</td>
    </tr>
      {{/each}}
</table>
<br />

<input type="button" id="greet"
    value="Print Items" {{action "show_item"}} />
<br /><br />
<input type="button" id="greet"
    value="Remove items" {{action "remove"}} />
{{outlet}}

Output: Visit localhost:4200/clear1 to view the output

Ember.js ProxyArray clear method

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

ember generate route clear2

app/routes/clear2.js

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

export default class StudentsRoute extends Route {
    students = [
        {
            name: 'Aakash',
            gender: 'M',
            class: 10,
            grade: 'A',
        },
        {
            name: 'Soniya',
            gender: 'F',
            class: 8,
            grade: 'C',
        },
        {
            name: 'Sita',
            gender: 'F',
            class: 10,
            grade: 'A',
        },
        {
            name: 'Ram',
            gender: 'M',
            class: 10,
            grade: 'A',
        },
        {
            name: 'Esnoor',
            gender: 'M',
            class: 9,
            grade: 'C',
        },
        {
            name: 'Isha',
            gender: 'F',
            class: 19,
            grade: 'B',
        },
        {
            name: 'Doman',
            gender: 'M',
            class: 12,
            grade: 'B',
        },
        {
            name: 'Lolu',
            gender: 'M',
            class: 10,
            grade: 'A',
        },
        {
            name: 'Lucky',
            gender: 'M',
            class: 11,
            grade: 'F',
        },
        {
            name: 'Neha',
            gender: 'F',
            class: 10,
            grade: 'B',
        },
        {
            name: 'Balit',
            gender: 'M',
            class: 12,
            grade: 'F',
        },
        {
            name: 'Hillier Buchanan',
            gender: 'M',
            class: 12,
            grade: 'A',
        },
        {
            name: 'Aman',
            gender: 'M',
            class: 11,
            grade: 'B',
        },
        {
            name: 'Anuj',
            gender: 'M',
            class: 12,
            grade: 'F',
        },
        {
            name: 'Satyam',
            gender: 'M',
            class: 12,
            grade: 'F',
        },
        {
            name: 'Aayush',
            gender: 'M',
            class: 12,
            grade: 'C',
        },
    ];
    temp2;
    model() {
        return this.students;
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set('students', this.students);
        controller.set('temp2', this.temp2);
    }
}

app/controllers/clear2.js

import Ember from "ember";
import { map, clear } from "@ember/array";

export default Ember.Controller.extend({
    actions: {
        remove() {
            this.students.clear();
        },
        allFemale() {
            let ans = '';
            let temp = this.students.map((item) =>
                item.gender == 'F' ? ans += item.name + '\n' : '');
            alert(ans);
        },
        allClass(data) {
            let ans = '';
            let temp = this.students.filter((item) =>
                item.class == JSON.parse(data) ?
                    ans += item.name + '\n' : '');
            alert(ans);
        },
    }
});

app/templates/clear2.hbs

{{page-title "Students"}}
<h3>List of Students: </h3>
<br /><br />
<table>
    <tr>
        <th>Name</th>
        <th>Class</th>
        <th>Gender</th>
        <th>Grade</th>
      </tr>
      {{#each @model as |student|}}
    <tr>
        <td>{{student.name}}</td>
          <td>{{student.class}}</td>
          <td>{{student.gender}}</td>
          <td>{{student.grade}}</td>
    </tr>
      {{/each}}
</table>
<br /><br />
<div>
    <label>Enter Class: </label>
      {{input value=this.temp2}}
</div>
<br />
<input
    type="button"
      id="all-class"
      value="All are in Same class"
      {{action "allClass" this.temp2}}
/>
<br /><br />
<input
    type="button"
      id="all-female"
      value="All are Female"
      {{action "allFemale"}}
/>
<br /><br />
<input
    type="button"
      id="remove-all"
      value="Remove all Students"
      {{action "remove"}}
/>
{{outlet}}

Output: Visit localhost:4200/clear2 to view the output

Ember.js ProxyArray clear method

Reference: https://api.emberjs.com/ember/4.4/classes/ArrayProxy/methods/clear?anchor=clear