Ember.js Ember.NativeArray 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 includes() method is used to find whether the passed object is present in the array or not.

Syntax:

includes( object, startAt );

Parameters:

• object: It is the object which is to be searched in an array.
• startAt: It is the index number from where to start looking.

Return Value: true if the object is found in array else false.

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

Javascript

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

export default class StudentsRoute extends Route {
    partyItems = [
        'Digital Camera',
        'Jugs, cups & straws',
        'Balloons',
        'Cups',
        'Scissors',
        'Cold Drink',
        'Table Confetti',
        'Party Hats',
        'Wine',
        'Napkins',
        'Scissors',
        'Party Plates',
        'Speakers',
        'Music System',
        'Cold Drink',
        'Cups',
        'Wine',
    ];
    len;
    model() {
        return this.partyItems;
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set("partyItems", this.partyItems);
        controller.set("len", this.len);
        controller.set("item", this.item);
    }
}

app/controllers/include1.js

Javascript

import Ember from "ember";

export default Ember.Controller.extend({
    actions: {
        last_index(data) {
            let ans = this.partyItems.lastIndexOf(data);
            alert(`Last Index of item is ${ans}`);
        },
        check_items(data) {
            let temp = this.partyItems.includes(data)
            alert(temp ? "Item is present in list" :
                "Item is not Present in list")
        },
        find_index(data) {
            let temp = this.partyItems.indexOf(data);
            alert(`Index of ${data} is ${temp}`)
        },

    },
});

app/templates/include1.hbs

Javascript

{{page-title "includes"}}
<h3>List of Items: </h3>
<table>
    <ul>
        {{#each @model as |student|}}
            <li>{{student}}</li>
        {{/each}}
      </ul>
</table>
<br /><br />
<div>
    <label>Enter Item: </label>
      {{input value=this.temp}}
</div>
<input
    type="button"
      id="check-atIndex"
      value="Check Item"
      {{action "check_items" this.temp}}
/>
<br /><br />
<div>
    <label>Enter Item: </label>
      {{input value=this.temp1}}
</div>
<input
    type="button"
      id="find-Index"
      value="Find Index Of Item"
      {{action "find_index" this.temp1}}
/>
<br /><br />
<div>
    <label>Enter Item: </label>
      {{input value=this.temp2}}
</div>
<input
    type="button"
      id="find-last"
      value="Find last Index"
      {{action "last_index" this.temp2}}
/>
{{outlet}}

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

Ember.js Ember.NativeArray includes method

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

ember generate route include2

app/routes/include2.js

Javascript

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

export default class PartyRoute extends Route {
    partyItems = [
        'Oxygen',
        'The Thing',
        'Source Code',
        'Infine',
        'Ad Astra',
        'Tenet',
        'SpiderHead',
        'The Thing',
        'A Quiet Place',
        'The Invisible Man',
        'Looper',
        'Infine',
        'Ad Astra'
    ];
    item;
    idx;
    len;
    model() {
        return this.partyItems;
    }
    setupController(controller, model) {
        super.setupController(controller, model);
        controller.set('partyItems', this.partyItems);
        controller.set('item', this.item);
        controller.set('idx', this.idx);
        controller.set('len', this.len);
    }
}

app/controllers/include2.js

Javascript

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

export default Ember.Controller.extend({
    actions: {
        check_index(item) {
            let temp = this.partyItems.indexOf(item);
            alert(`Index of Movie is ${temp}`);
        },
        check_movie(item) {
            let temp = this.partyItems.includes(item);
            alert(temp ? 'Movie is present in watch list' :
                'Movie is not Present in watch list');
        },
        check_last(item) {
            let temp = this.partyItems.lastIndexOf(item);
            alert(`Last Index of Movie is ${temp}`);
        },
    },
});

app/templates/include2.hbs

Javascript

{{page-title "includes"}}
<h3>Here is a list of items: </h3>
<ul>
    {{#each @model as |party|}}
        <li>{{party}}</li>
      {{/each}}
</ul>
<br /><br />
<div>
    <label>Enter Movie: </label>
      {{input value=this.temp}}
</div>
<input
    type="button"
      id="find-Index"
      value="Find Movie Index"
      {{action "check_index" this.temp}}
/>
<br /><br />
<div>
    <label>Enter Movie: </label>
      {{input value=this.temp1}}
</div>
<input
    type="button"
      id="check-movie"
      value="Check Movie"
      {{action "check_movie" this.temp1}}
/>
<br /><br />
<div>
    <label>Enter Item: </label>
      {{input value=this.temp2}}
</div>
<input
    type="button"
      id="check-last"
      value="Check Last Index of Movie"
      {{action "check_last" this.temp2}}
/>
{{outlet}}

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

Ember.js Ember.NativeArray includes method

Reference: https://api.emberjs.com/ember/4.4/classes/Ember.NativeArray/methods/includes?anchor=includes