Ember.js EmberArray findBy() Method
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 findBy() method is to get the first item with a property matching the passed value.
Syntax:
findBy( key, value );
Property:
- key: It is the name of the property that we want to test.
- value: it is an optional value that wants to test against the key.
Return Value: It returned the returned item if it finds else return ‘undefined’.
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 find-by1
app/routes/find-by1.js
import Route from '@ember/routing/route' ; import { classify, w } from '@ember/string' ; import { pushObject, sortBy } from '@ember/array' ; export default class LanguagesRoute extends Route { name = `Hindi Korean Marathi Telugu Portuguese Turkish Bengali Spanish`; num = `343.9 81.7 83.1 82.0 232.4 82.3 233.7 474`; languages = []; initLanguages() { this .languages = []; this .name = w( this .name); this .num = w( this .num); for (let i = 0; i < this .name.length; i++) { let obj = new Object(); obj[ 'name' ] = classify( this .name[i]); obj[ 'num' ] = this .num[i]; this .languages.pushObject(obj); } } temp1; model() { this .initLanguages(); return this .languages; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'languages' , this .languages); controller.set( 'temp1' , this .temp1); } } |
app/controlloers/find-by1.js
import Ember from 'ember' ; import { mapBy } from '@ember/array' ; export default Ember.Controller.extend({ actions: { FindNatives(data1) { let ans = this .languages.findBy( 'name' , data1); alert(`${ans.num} Million people speaks ${ans.name}`); }, }, }); |
app/templates/find-by1.hbs
{{page-title "Languages" }} <h2>Spoken Languages in the World</h2> <table style= "border: 2px solid black;padding: 30px;" > <tr> <th>Language</th> <th>Native Speakers ( in Millions)</th> </tr> {{ #each @model as |language|}} <tr> <td>{{language.name}}</td> <td>{{language.num}}</td> </tr> {{/each}} </table> <br /><br /> <div> <label> Enter Language Name for search: </label> {{input value= this .temp1}} </div> <br /> <div> <input type= "button" id= "check-language" value= "Check Language Speaking Population" {{action "FindNatives" this .temp1}} /> </div> {{outlet}} |
Output: Visit localhost:4200/find-by1 to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route find-by2
app/routes/find-by2.js
import Route from '@ember/routing/route' ; export default class StudentsRoute extends Route { students = [ { name: 'Aakash' , gender: 'M' , class: 10, grade: 'A' , }, { name: 'Soniya' , gender: 'F' , class: 8, grade: 'C' , }, { name: 'Esnoor' , gender: 'M' , class: 9, grade: 'C' , }, { name: 'Isha' , gender: 'F' , class: 11, grade: 'B' , }, { name: 'Doman' , gender: 'M' , class: 12, grade: 'B' , }, { name: 'Lolu' , gender: 'M' , class: 10, grade: 'A' , }, { name: 'Lucky' , gender: 'M' , class: 11, grade: 'F' , }, { name: 'Balit' , gender: 'M' , class: 12, grade: 'F' , }, { name: 'Aman' , gender: 'M' , class: 11, grade: 'B' , }, { name: 'Anuj' , gender: 'M' , class: 12, grade: 'F' , }, { name: 'Satyam' , gender: 'M' , class: 12, grade: 'F' , }, { name: 'Aayush' , gender: 'M' , class: 12, grade: 'C' , }, ]; temp1 = [ 'name' , 'gender' , 'class' , 'grade' ] temp2; temp; model() { return this .students; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'students' , this .students); controller.set( 'temp' , this .temp); controller.set( 'temp1' , this .temp1); controller.set( 'temp2' , this .temp2); } } |
app/controlloers/find-by2.js
import Ember from 'ember' ; export default Ember.Controller.extend({ vehicle: null , vehicles: Ember.String.w( 'Tesla Chrysler Toyota' ), actions: { selectattr(temp) { this .set( 'temp' , temp); }, find_Data(data, data1) { data1 = (data === 'class' ) ? JSON.parse(data1) : data1; let ans = this .students.findBy(data, data1); alert(`${ans.name} from Class ${ans.class}`); }, }, }); |
app/templates/find-by2.hbs
{{page-title "Student" }} <h3>List of Students: </h3> <br /><br /> <table> <tr> <th>Name</th> <th>Gender </th> <th>Class </th> <th>Grade </th> </tr> {{ #each @model as |detail|}} <tr> <td>{{detail.name}}</td> <td>{{detail.gender}}</td> <td>{{detail.class}}</td> <td>{{detail.grade}}</td> </tr> {{/each}} </table> <br /> <div> <label>Select Attribute: </label> <select onchange={{action "selectattr" value= "target.value" }}> {{ #each this.temp1 as |attribute|}} <option value={{attribute}}>{{attribute}}</option> {{/each}} </select> </div> <br /> <div> <label>Enter value for Attribute: </label> {{input value= this .temp2}} </div> <div> <input type= "button" id= "check-student" value= "Get the First Student" {{action "find_Data" this .temp this .temp2}} /> </div> {{outlet}} |
Output: Visit localhost:4200/find-by2 to view the output
Reference: https://api.emberjs.com/ember/4.6/classes/EmberArray/methods/findBy?anchor=findBy
Contact Us