How to get value from an array based on the user selection? - ember.js

Question

I've follow the ember-paper guide and defined the options data as below. The user is able to select any country from the options.
timeZoneOptions: Object.freeze([
{ groupName: "Asia", options:["Kabul","Yerevan","Baku","Dhaka","Brunei","Bangkok","Shanghai","Urumqi","Taipei","Macau","Tbilisi","Dili","Kolkata","Jakarta"]},
{ groupName: "Australia", options: ["Darwin", "Eucla", "Perth", "Brisbane","Lindeman","Adelaide","Hobbart","Currie","Melbourne"]},
])
Here is the code for the select option. It will display the options groupby the groupName.
{{#paper-select options=this.timeZoneOptions
selected=this.timeZone
onChange=(action (mut this.timeZone)) as |timeZon| }}
{{timeZon}}
{{/paper-select}}
I can't get the data using {{this.timeZone.groupName}}.
How can I do if i want to get the groupName based on the option user selected?

Answer 1

What you have there seems correct. Maybe the error lies in the mut usage, maybe it's somewhere else.
The mut helper is quite vague. It is gonna be deprecated when the Ember team figures out how to do it gracefully.
You can avoid the mut helper by creating a distinct action on your controller/component.
This will let you debug: simply put a debugger statement into your action and proceed from there.
Classic Ember style:
import Component from '#ember/component';
export default Component.extend({
timeZoneOptions: Object.freeze([
{ groupName: "Asia", options:["Kabul","Yerevan","Baku","Dhaka","Brunei","Bangkok","Shanghai","Urumqi","Taipei","Macau","Tbilisi","Dili","Kolkata","Jakarta"]},
{ groupName: "Australia", options: ["Darwin", "Eucla", "Perth", "Brisbane","Lindeman","Adelaide","Hobbart","Currie","Melbourne"]},
]),
currentTimeZoneOption: null,
actions: {
selectTimeZoneOption(timeZoneOption) {
this.set('currentTimeZoneOption', timeZoneOption');
}
}
});
{{#paper-select
options=this.timeZoneOptions
selected=this.currentTimeZoneOption
onChange=(action 'selectTimeZoneOption')
as |timeZoneOption|
}}
{{timeZoneOption}}
{{/paper-select}}
<p>
Current timezone option:
{{this.currentTimeZoneOption.groupName}}
</p>
Ember Octane style:
import Component from '#glimmer/component';
import { tracked } from '#glimmer/tracking';
import { action } from '#ember/object';
export default class MyComponent extends Component {
timeZoneOptions = Object.freeze([
{ groupName: "Asia", options:["Kabul","Yerevan","Baku","Dhaka","Brunei","Bangkok","Shanghai","Urumqi","Taipei","Macau","Tbilisi","Dili","Kolkata","Jakarta"]},
{ groupName: "Australia", options: ["Darwin", "Eucla", "Perth", "Brisbane","Lindeman","Adelaide","Hobbart","Currie","Melbourne"]},
]);
#tracked
currentTimeZoneOption = null;
#action
selectTimeZoneOption(timeZoneOption) {
this.currentTimeZoneOption = timeZoneOption;
}
}
<div class="my-component">
<PaperSelect
#options={{this.timeZoneOptions}}
#selected={{this.currentTimeZoneOption}}
#onChange={{this.selectTimeZoneOption}}
as |timeZoneOption|
>
{{timeZoneOption}}
</PaperSelect>
<p>
Current timezone option:
{{this.currentTimeZoneOption.groupName}}
</p>
</div>