Ember.js EmberArray includes() 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 include() method is used to check if passed object is present inside array.

Syntax:

include( object, startAt )

Parameters:

• object: It is the object which we search in array.
• startAt: It is the optional starting index to search.

Return Value: True if object found in array.

Installation Steps:

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 include1

app/routes/include1.js

import Route from '@ember/routing/route';
import { classify, w } from '@ember/string';

export default class RichestPeopleRoute extends Route {
    items = [
        'Lady Finger',
        undefined,
        'Tomato',
        undefined,
        'Apple',
        'Potato',
        null];

    someMoreDetails = [
        'Mango',
        'Banana',
        'Cabbage',
        'Orange',
    ];
    temp;
    model() {
        return this.items;
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set('items', this.items);
        controller.set('someMoreDetails',
            this.someMoreDetails);
        controller.set('item2', this.item2);
        controller.set('temp', this.temp);
    }
}

app/controllers/include1.js

import Ember from 'ember';
import { compact } from '@ember/array';

export default Ember.Controller.extend({
    actions: {
        checkItem(data) {
            let ans = this.items.includes(data);
            alert(`${ans ? 'List contains item ' :
                'List does not contains '}`);
        },
        pushMoreDetails() {
            this.items.pushObjects(this.someMoreDetails);
        }
    },
});

app/templates/include1.hbs

{{page-title "EmberArray include"}}
<table style=" border-spacing : 30px">
    <h2>Array with undefined and null</h2>
      <ul>
        {{#each @model as |i|}}
              {{#if i}}
                <li>{{i}}</li>
              {{else}}
                <li><b>undefined/null</b></li>
              {{/if}}
        {{/each}}
    </ul>
</table>
{{#if this.flag}}
    <h2>Array with undefined and null</h2>
      <table>
        <ul>
              {{#each @model as |i|}}
                {{#if i}}
                      <li>{{i}}</li>
                {{else}}
                      <li><b>undefined/null</b></li>
                {{/if}}
              {{/each}}
        </ul>
    </table>
{{/if}}
<br /><br />
<div>
    <label>Enter Item Name : </label>
      {{input value=this.temp}}
</div>
<input
    type="button"
      id="all-Fruits"
      value="Check In list"
      {{action "checkItem" this.temp}}
/>
<br /><br />
<input
    type="button"
      id="push-details"
      value="Add More Details"
      {{action "pushMoreDetails"}}
/>
{{outlet}}

Output: Visit localhost:4200/include1 to view the output

Ember.js EmberArray include method

Example 2: Type the following code to generate the route for this example:

ember generate route include2

app/routes/include2.js

import Route from '@ember/routing/route';

export default class WebsitesRoute extends Route {
    food = [
        {
            food: 'apple',
            isFruit: true,
            Bucket: '1',
        },
        {
            food: 'Potato',
            isFruit: false,
            Bucket: '2',
        },
        {
            food: 'Banana',
            isFruit: true,
            Bucket: '1',
        },
        {
            food: 'Burgur',
            isFruit: false,
            Bucket: '2',
        },
        {
            food: 'Orange',
            isFruit: true,
            Bucket: '1',
        },
        {
            food: 'sandwitch',
            isFruit: false,
            Bucket: '2',
        },
        {
            food: 'bean',
            isFruit: false,
            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);
    }
}

app/controllers/include2.js

import Ember from 'ember';

export default Ember.Controller.extend({
    actions: {
        Selct1(data1) {
            let temp = this.food.filterBy('Bucket', '1');
            let temp1 = temp.getEach('food')
            let ans = temp1.includes(data1);
            alert(`${ans ? 'it Contains' :
                "It does not contains"}`);
        },

        Selct2(data1) {
            let temp = this.food.filterBy('Bucket', '2');
            let temp1 = temp.getEach('food')
            let ans = temp1.includes(data1);
            alert(`${ans ? 'it Contains' :
                "It does not contains"}`);
        },
        nonFruit() {
            let temp = this.food.filterBy('isFruit', false);
            let ans = '';
            for (let i = 0; i < temp.length; i++)
                ans += temp[i].food + '\n';
            alert(ans);
        },
    },
});

app/templates/include2.hbs

{{page-title "Includes"}}
<h3>Websites</h3>
<br /><br />
<table>
    <tr>
        <th> Food Name </th>
        <th>Bucket </th>
        <th>Fruit </th>
      </tr>
          {{#each @model as |website|}}
    <tr>
          <td>{{website.food}}</td>
          <td>{{website.Bucket}}</td>
          <td>{{website.isFruit}}</td>
    </tr>
        {{/each}}
</table>
<br /><br />
<div>
    <label>Enter Item Name : </label>
      {{input value=this.temp2}}
</div>
<input
    type="button"
      id="get-item2"
      value="Check In Bucket 1"
      {{action "Selct1" this.temp2}}
/>
<input
    type="button"
      id="get-item"
      value="Check In Bucket 2"
      {{action "Selct2" this.temp2}}
/>
{{outlet}}

Output: Visit localhost:4200/include2 to view the output

Ember.js EmberArray include method

Reference: https://api.emberjs.com/ember/4.6/classes/EmberArray/methods/includes?anchor=includes