Ember.js MutableArray compact() Method
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which are 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 compact() method is used to make a copy of an array without null and undefined elements.
Syntax:
compact( Array );
Property:
- Array: It is the array from which we have to make an array without null and undefined.
Return: It returns an array without null and undefined element.
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 compact1
app/routes/compact1.js
import Route from '@ember/routing/route' ; import { classify, w } from '@ember/string' ; export default class RichestPeopleRoute extends Route { richestPeople = [ 'elon Musk' , undefined, 'bernard Arnault and family' , null , 'jeff Bezos' , 'Bill gates' , 'gautam adani and family' , 'Larry Page' , undefined, 'Warren Buffet' , 'larry Ellison' , 'mukesh ambani' , null , 'sergey brin' , ]; init() { super .init(...arguments); this .richestPeople = this .richestPeople.compact(); } model() { this .init(); return this .richestPeople; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'num' , this .num); controller.set( 'richestPeople' , this .richestPeople); } } |
app/templates/add-objects.hbs
{{page-title "Richest People" }} <h2>Top Richest People in the World</h2> <ul> {{ #each @model as |rich-person|}} <li>{{rich-person}}</li> {{/each}} </ul> {{outlet}} |
Output: Visit localhost:4200/compact1 to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route compact2
app/routes/compact2.js
import Route from '@ember/routing/route' ; export default class NotepadRoute extends Route { items = [ 'Bread' , 'Facewash' , null , undefined, null , 'Egg' , 'Pen' , 'Medicine' , ]; model() { return this .items; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'items' , this .items); } } |
app/controllers/compact2.js
import Ember from 'ember' ; import { popObject } from '@ember/array' ; export default Ember.Controller.extend({ actions: { removeItem() { let ans = this .items.compact(); alert(ans.join( '\n' )); }, }, }); |
app/template/compact2.hbs
{{page-title "compact" }} <h2>Your Items</h2> <ul> {{ #each @model as |i|}} {{ #if i}} <li>{{i}}</li> {{ else }} <li><b>undefined</b></li> {{/ if }} {{/each}} </ul> <br /><br /> <div> <input type= "button" id= "remove-item" value= "Remove Item" {{action "removeItem" }} /> </div> {{outlet}} |
Output: Visit localhost:4200/compact2 to view the output
Reference: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods/compact?anchor=compact
Contact Us