Ember.js ArrayProxy filter() Method

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);
    }
}

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();

        },
    },
});

{{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}}

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);
    }
}

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

{{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}}