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