Open In App

Ember.js MutableArray compact() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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

Ember.js MutableArray compact

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

Ember.js MutableArray compact

Reference: https://api.emberjs.com/ember/4.4/classes/MutableArray/methods/compact?anchor=compact



Last Updated : 08 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads