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
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}} |
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
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}} |
Output: Visit localhost:4200/filter2 to view the output
Reference: https://api.emberjs.com/ember/4.4/classes/ArrayProxy/methods/filter?anchor=filter