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
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
Reference: https://api.emberjs.com/ember/4.6/classes/EmberArray/methods/includes?anchor=includes