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 clear() method is used to remove all the elements from an array.
Syntax:
clear( Array );
Property:
- Array: It is an array whose element we want to remove.
Return Value: It returns an empty array.
Steps to Install and Run Ember.js:
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
Step 2: 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 clear1
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 { reduce, clear } from '@ember/array' ;
export default Ember.Controller.extend({
actions: {
show_item() {
let foo = this .food.reduce((acc, item) =>
acc + item.food + '\n' , '' );
alert(foo);
},
remove() {
this .food.clear();
},
},
}); |
{{page-title "invoke" }}
<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 /> <input type= "button" id= "greet" value= "Print Items" {{action "show_item" }} />
<br /><br /> <input type= "button" id= "greet" value= "Remove items" {{action "remove" }} />
{{outlet}} |
Output: Visit localhost:4200/clear1 to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route clear2
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 { map, clear } from "@ember/array" ;
export default Ember.Controller.extend({
actions: {
remove() {
this .students.clear();
},
allFemale() {
let ans = '' ;
let temp = this .students.map((item) =>
item.gender == 'F' ? ans += item.name + '\n' : '' );
alert(ans);
},
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" }}
/> <br /><br /> <input type= "button"
id= "remove-all"
value= "Remove all Students"
{{action "remove" }}
/> {{outlet}} |
Output: Visit localhost:4200/clear2 to view the output
Reference: https://api.emberjs.com/ember/4.4/classes/ArrayProxy/methods/clear?anchor=clear