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