Ember.js MutableArray reduce() Method
Last Updated :
27 Sep, 2022
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 Ember.js MutableArray reduce Method is used to combine the values of the array into a single value. This method is useful for collecting summaries from Array.
Syntax:
reduce( callback, initialValue ) ;
Parameters:
- callback: It is a function that will perform on each element of the array and return the result.
- initialValue: It is the initial value for the summary of the Array.
Return Value: This method returns a reduced value.
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 details
app/route/party.js
import Route from '@ember/routing/route' ;
export default class PartyRoute extends Route {
partyItems = [2, 3, 5, 6, 7, 8, 9, 2];
ans;
itemString;
itemList;
start;
end;
model() {
return this .partyItems;
}
setupController(controller, model) {
super .setupController(controller, model);
controller.set( 'partyItems' , this .partyItems);
controller.set( 'ans' , this .ans);
controller.set( 'itemString' , this .itemString);
controller.set( 'itemList' , this .itemList);
controller.set( 'start' , this .start);
controller.set( 'end' , this .end);
}
}
|
app/controller/party.js
import Ember from 'ember' ;
import {
toArray,
unshiftObject,
unshiftObjects,
removeAt,
reduce,
} from '@ember/array' ;
export default Ember.Controller.extend({
actions: {
addItems(itemString) {
this .itemList =
itemString.split( ',' ).toArray();
if ( this .itemList.length == 1)
this .partyItems.unshiftObject(
this .itemList[0]);
else this .partyItems.unshiftObjects(
this .itemList);
this .set( 'itemString' , '' );
},
removeItems(start, end) {
this .partyItems.removeAt(start, end);
},
sumItems() {
let ans = this .partyItems.reduce( function
(accum, curr) {
return accum + curr;
});
alert( 'Sum of Array is ' + ans);
},
},
});
|
app/template/party.hbs
{{page-title "Party" }}
<h3>Here is a list of items: </h3>
<ul>
{{ #each @model as |party|}}
<li>{{party}}</li>
{{/each}}
</ul>
<br /><br />
<div>
<label>Enter Items: </label>
{{input value= this .itemString}}
</div>
<div>
<input
type= "button"
id= "add-item"
value= "Add Items"
{{action "addItems" this .itemString}}
/>
</div>
<br /><br />
<div>
<label>Enter Start Index: </label>
{{input value= this .start}}
</div>
<div>
<label>Enter End Index: </label>
{{input value= this .end}}
</div>
<div>
<input
type= "button"
id= "remove-items"
value= "Remove Items"
{{action "removeItems" this .start this .end}}
/>
</div>
<br />
<br />
<div>
<input type= "button" id= "sum-items"
value= "Item sum" {{action "sumItems" }} />
</div>
{{outlet}}
|
Output: Visit localhost:4200/party to view the output:
Ember.js MutableArray reduce
Example 2: Type the following code to generate the route for this example:
ember generate route fruits
app/route/fruits.js
import Ember from "ember" ;
import { shiftObject, isAny, isEvery }
from "@ember/array" ;
export default Ember.Controller.extend({
actions: {
removeFruit() {
this .fruits.shiftObject();
},
anyFruit() {
let Fruit_presence =
this .fruits.reduce( function (accum, curr) {
return accum || curr[ 'isFruit' ];
}, true );
alert(`${Fruit_presence ? "Yes" : "No" }`);
},
allFruit() {
let Fruit_presence =
this .fruits.reduce( function (accum, curr) {
return accum && curr[ 'isFruit' ];
}, true );
alert(`${Fruit_presence ? "Yes" : "No" }`);
},
},
});
|
app/controller/fruits.js
import Ember from "ember" ;
import { shiftObject, isAny, isEvery } from "@ember/array" ;
export default Ember.Controller.extend({
actions: {
removeFruit() {
this .fruits.shiftObject();
},
anyFruit() {
let Fruit_presence = this .fruits.reduce
( function (accum, curr) {
return accum || curr[ 'isFruit' ];
}, true );
alert(`${Fruit_presence ? "Yes" : "No" }`);
},
allFruit() {
let Fruit_presence = this .fruits.reduce
( function (accum, curr) {
return accum && curr[ 'isFruit' ];
}, true );
alert(`${Fruit_presence ? "Yes" : "No" }`);
},
},
});
|
app/templates/fruits.hbs
{{page-title "Fruits" }}
<h3>Here is a list of eatables: </h3>
<ul>
{{ #each @model as |eatable|}}
<li style= "color: {{eatable.color}}" >
{{eatable.name}}</li>
{{/each}}
</ul>
<br /><br />
<input
type= "button"
id= "remove-eatable"
value= "Remove Eatable"
{{action "removeFruit" }}
/>
<br /><br />
<input
type= "button"
id= "fruit-any"
value= "List Contains Any Fruit?"
{{action "anyFruit" }}
/>
<br /><br />
<input
type= "button"
id= "fruit-all"
value= "List Contains Only Fruit?"
{{action "allFruit" }}
/>
{{outlet}}
|
Output: Visit localhost:4200/fruits to view the output
Ember.js MutableArray reduce
Reference: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods/reduce?anchor=reduce
Share your thoughts in the comments
Please Login to comment...