Ember.js EmberArray 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() is used to get a filtered array with items that return true for the provided callback function.
Syntax:
filter( callback, target );
Parameters:
- callback: It is the callback function that will be applied to each item of the array.
- target: It is the object in which the callback function will apply.
Return Value: It returned the filtered array.
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
Now you can create the project by typing in the following piece of code:
ember new <project-name> --lang en
Step 2: 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 Ember from "ember" ; import { filter } from "@ember/array" ; export default Ember.Controller.extend({ actions: { allPass() { let ans = '' ; let temp = this .students.filter((item) => item.grade == 'F' ); for (let i = 0; i < temp.length; i++) ans += temp[i].name + '\n' ; alert(ans); }, allFemale() { let ans = '' ; let temp = this .students.filter((item) => item.gender == 'F' ); for (let i = 0; i < temp.length; i++) ans += temp[i].name + '\n' ; alert(ans); }, allClass(data) { let ans = '' ; let temp = this .students.filter((item) => item.class == JSON.parse(data)); for (let i = 0; i < temp.length; i++) ans += temp[i].name + '\n' ; alert(ans); }, } }); |
app/controllers/filter1.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/templates/filter1.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 /> <input type= "button" id= "all-pass" value= "Failed Student" {{action "allPass" }} /> <br /><br /> <input type= "button" id= "all-female" value= "All are Female" {{action "allFemale" }} /> <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}} /> {{outlet}} |
Output: Visit localhost:4200/filter1 to view the output
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' ; import { } from '@ember/array' ; export default class FruitsRoute extends Route { fruits = [ { name: 'Lady Finger' , isFruit: false , color: 'green' , }, { name: 'Tomato' , isFruit: false , color: 'red' , }, { name: 'Apple' , isFruit: true , color: 'red' , }, { name: 'Potato' , isFruit: false , color: 'brown' , }, { name: 'Mango' , isFruit: true , color: 'yellow' , }, { name: 'Bannana' , isFruit: true , color: 'yellow' , }, { name: 'Cabbage' , isFruit: false , color: 'green' , }, { name: 'Orange' , isFruit: true , color: 'orange' , }, ]; temp1 = [ 'name' , 'isFruit' , 'color' ]; temp2; model() { return this .fruits; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'fruits' , this .fruits); controller.set( 'temp1' , this .temp1); controller.set( 'temp2' , this .temp2); } } |
app/controllers/filter2.js
import Ember from 'ember' ; export default Ember.Controller.extend({ vehicle: null , vehicles: Ember.String.w( 'Tesla Chrysler Toyota' ), actions: { selectattr(temp) { this .set( 'temp' , temp); }, filter_Data(data, data1) { if (data == 'isFruit' ) { let ans = this .fruits.filter((item) => item[data] == JSON.parse(data1)); let temp = '' ; for (let i = 0; i < ans.length; i++) temp += (ans[i].name + '\n' ) alert(temp); } else { let ans = this .fruits.filter((item) => item[data] == data1); alert(JSON.stringify(ans)); } }, }, }); |
app/templates/filter2.hbs
{{page-title "Is-Fruits" }} <h3>List of Items in Bucket: </h3> <br /><br /> <table> <tr> <th>Name</th> <th>IsFruit</th> <th>color</th> </tr> {{ #each @model as |detail|}} <tr> <td>{{detail.name}}</td> <td>{{detail.isFruit}}</td> <td>{{detail.color}}</td> </tr> {{/each}} </table> <br /> <div> <label>Select Attribute: </label> <select onchange={{action "selectattr" value= "target.value" }}> {{ #each this.temp1 as |attribute|}} <option value={{attribute}}> {{attribute}} </option> {{/each}} </select> </div> <br /> <div> <label>Enter value for Attribute: </label> {{input value= this .temp2}} </div> <div> <input type= "button" id= "check-fruit" value= "Filter Data" {{action "filter_Data" this .temp this .temp2}} /> </div> {{outlet}} |
Output: Visit localhost:4200/filter2 to view the output
Reference: https://api.emberjs.com/ember/4.6/classes/EmberArray/methods/filter?anchor=filter