Ember.js ArrayProxy filter() 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 filter() method is used to form a new array with all the items of the previous array which returns true against the callback function.

Syntax:

filter( callback, target );

Parameters:

• callback: It is the callback function that is tested against each item of the array.
• target: It is the item that is tested against the callback function.

Return Value: It returns a filtered Array.

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 filter1

app/routes/filter1.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/filter1.js

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

export default Ember.Controller.extend({

    actions: {
        Fiter_item(data) {
            let foo = this.food.filter((item)
            => item.quant > JSON.parse(data));
            let temp = foo.reduce((acc, item)
            => acc + item.food + '\n', '');
            alert(temp ? temp : "No Item is filtered");

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

        },
    },
});

app/templates/filter1.hbs

{{page-title "filter"}}

<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 />
<div>
    <label>Enter Quantity: </label>
    {{input value=this.temp}}
</div>
<input
    type="button"
    id="greet"
    value="Filter Item"
    {{action "Fiter_item" this.temp}}
/>

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

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

Ember.js ArrayProxy filter method

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

ember generate route filter2

app/routes/filter2.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/filter2.js

import Ember from "ember";
import { filter, reduce } from "@ember/array";

export default Ember.Controller.extend({
    actions: {

        allFemale() {
            let temp = this.students.filter((item)
            => item.gender == 'F');
            let foo = temp.reduce((acc, person)
            => acc + person.name + '\n', '')
            alert(foo);
        },
        allClass(data) {
            let ans = '';
            let temp = this.students.filter((item)
            => item.class == JSON.parse(data) ?
            ans += item.name + '\n' : '');
            alert(ans);
        },
    }
});

app/templates/filter2.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"}}
/>
{{outlet}}

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

Ember.js ArrayProxy filter method

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