Ember.js MutableArray reduce() 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 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:
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(`${'isFruit' in this.fruits[0]}`); alert(`${Fruit_presence ? "Yes" : "No" }`); }, allFruit() { let Fruit_presence = this .fruits.reduce( function (accum, curr) { return accum && curr[ 'isFruit' ]; }, true ); //alert(`${'isFruit' in this.fruits[0]}`); 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(`${'isFruit' in this.fruits[0]}`); alert(`${Fruit_presence ? "Yes" : "No" }`); }, allFruit() { let Fruit_presence = this .fruits.reduce ( function (accum, curr) { return accum && curr[ 'isFruit' ]; }, true ); //alert(`${'isFruit' in this.fruits[0]}`); 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
Reference: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods/reduce?anchor=reduce