Ember.js EmberArray sortBy() Method
Last Updated :
22 Sep, 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 sortBy() method is used to sort an array by the specified key.
Syntax:
sortBy( key )
Parameters:
- name(string): Name(s) to sort on.
Return Value: The sorted array.
Steps to Install and Run Ember.js:
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 languages
app/routes/languages.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 =
`mandarin_Chinese spanish english Hindi
bengali Portuguese russian japanese
western_punjabi yueChinese`;
num = `929.0 474.7 372.9 343.9 233.7
232.4 154.0 125.3 92.7 85.2`;
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);
}
}
model() {
this .initLanguages();
this .languages = this .languages.sortBy( 'name' );
return this .languages;
}
}
|
app/template/languages.hbs
{{page-title "Languages"}}
< h2 >Most Spoken Languages in the World</ h2 >
< table style = "border: 2px solid black;padding: 30px;" >
< tr >
< th >Language</ th >
< th >Native Speakers (millions)</ th >
</ tr >
{{#each @model as |language|}}
< tr >
< td >{{language.name}}</ td >
< td >{{language.num}}</ td >
</ tr >
{{/each}}
</ table >
{{outlet}}
|
Output: Visit localhost:4200/languages to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route richest-people
app/routes/richest-people.js
import Route from '@ember/routing/route' ;
import { sortBy } from '@ember/array' ;
export default class RichestPeopleRoute extends Route {
richestPeople = [
{ 'name' : 'mukesh ambani' , 'net-worth' : 90.7 },
{ 'name' : 'jeff Bezos' , 'net-worth' : 148.1 },
{ 'name' : 'Warren Buffet' , 'net-worth' : 99.3 },
{ 'name' : 'Bill gates' , 'net-worth' : 104.7 },
{ 'name' : 'elon Musk' , 'net-worth' : 253.4 },
{ 'name' : 'gautam adani and family' ,
'net-worth' : 115.8 },
{ 'name' : 'Larry Page' , 'net-worth' : 93.4 },
{ 'name' : 'larryEllison' , 'net-worth' : 103.3 },
{ 'name' : 'sergeyBrin' , 'net-worth' : 89.9 },
{ 'name' : 'bernard Arnault and family' ,
'net-worth' : 157.1 },
];
model() {
this .richestPeople = this .richestPeople.sortBy( 'net-worth' );
return this .richestPeople;
}
}
|
app/template/richest-people.hbs
{{page-title "Richest People"}}
< h2 >Top 10 Richest Person in the World</ h2 >
< table style = "border: 2px solid black;padding: 30px;" >
< tr >
< th >Name</ th >
< th >Net Worth (in Billion Dollars)</ th >
</ tr >
{{#each @model as |person|}}
< tr >
< td >{{person.name}}</ td >
< td >{{person.net-worth}}</ td >
</ tr >
{{/each}}
</ table >
{{outlet}}
|
Output: Visit localhost:4200/richest-people to view the output
Reference: https://api.emberjs.com/ember/4.6/classes/EmberArray/methods/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...