Ember.js Ember.NativeArray [] Property
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 [] property is used to get or set the array content.
Syntax:
array[]
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 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 }, ]; firstPerson; lastPerson; idx = 5; randomPerson; num; model() { this .richestPeople = this .richestPeople.sortBy( 'net-worth' ); this .randomPerson = this .richestPeople[ this .idx - 1]; return this .richestPeople; } setupController(controller, model) { this ._super(controller, model); controller.set( 'idx' , this .idx); controller.set( 'firstPerson' , this .richestPeople.firstObject); controller.set( 'lastPerson' , this .richestPeople.lastObject); controller.set( 'randomPerson' , this .randomPerson); controller.set( 'richestPeople' , this .richestPeople); controller.set( 'num' , this .richestPeople.length); } } |
app/controllers/richest-people.js
import Ember from 'ember' ; export default Ember.Controller.extend({ actions: { setIdx(n) { this .idx = parseInt(n); this .set( 'randomPerson' , this .richestPeople[ this .idx - 1]); } } }) |
app/template/richest-people.hbs
{{page-title "Richest People"}} < div > < label >Enter Value (1-{{this.num}}):</ label > {{input value=this.idx}} </ div > < div > < input type = "button" id = "fetch" value = "Fetch" {{action "setIdx" this.idx}} /> </ div > < br /> < div >First Person on the List: {{this.firstPerson.name}} ${{this.firstPerson.net-worth}} B </ div > < br /> < div >Last Person on the List: {{this.lastPerson.name}} ${{this.lastPerson.net-worth}} B </ div > < br /> < div >Random Person on the List: {{this.randomPerson.name}} ${{this.randomPerson.net-worth}} B </ div > {{outlet}} |
Output: Visit localhost:4200/richest-people to view the output:
Example 2: Type the following code to generate the route for this example:
ember generate route notepad
app/routes/notepad.js
import Route from '@ember/routing/route' ; export default class NotepadRoute extends Route { items = []; empty = true ; item; firstItem; lastItem; randomItem; num; model() { this .firstItem = this .items.firstObject; this .lastItem = this .items.lastObject; this .num = this .items.length; return this .items; } setupController(controller, model) { this ._super(controller, model); controller.set( 'items' , this .items); controller.set( 'empty' , this .empty); controller.set( 'firstItem' , this .firstItem); controller.set( 'lastItem' , this .lastItem); controller.set( 'randomItem' , this .randomItem); controller.set( 'num' , this .num); } } |
app/controllers/notepad.hbs
import Ember from "ember" ; import { pushObject } from "@ember/array" ; export default Ember.Controller.extend({ actions: { addItem(item) { this .items.pushObject(item); this .set( "empty" , false ); this .set( "firstItem" , this .items.firstObject); this .set( "lastItem" , this .items.lastObject); this .set( "num" , this .items.length); this .set( "randomItem" , this .items[ Math.floor(Math.random() * this .num)]); }, }, }); |
app/template/notepad.hbs
{{page-title "Notepad"}} < h2 >Notepad</ h2 > < div > < label >Enter Item: </ label > {{input value=this.item}} </ div > < div > < input type = "button" id = "add-item" value = "Add Item" {{action "addItem" this.item}} /> </ div > < br />< br /> {{#if this.empty}} < div >The list is empty!</ div > {{else}} < div > < div >First Item: {{this.firstItem}}</ div > < div >Latest Item: {{this.lastItem}}</ div > < div >Random Item: {{this.randomItem}}</ div > < div >Number of Items: {{this.num}}</ div > </ div > {{/if}} < br /> < br /> {{outlet}} |
Output: Visit localhost:4200/notepad to view the output:
Reference: https://api.emberjs.com/ember/4.6/classes/Ember.NativeArray/properties/