Ember.js EmberArray includes() Method
Last Updated :
28 Nov, 2022
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
Share your thoughts in the comments
Please Login to comment...