Can't get value of array inside computed property - ember.js

Question

I'm having trouble with a computed property in Ember.
The problematic item is timeZones, which is set like this:
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return Ember.RSVP.hash({
account: this.store.findRecord('account', params.id),
timeZones: this.store.findAll('time-zone'), <------------ timeZones
users: this.store.query('user', { by_account_id: params.id })
});
},
setupController(controller, model) {
this._super(controller, model.account);
controller.set('users', model.users);
controller.set('timeZones', model.timeZones);
}
});
Then I have something called selectedTimeZone which looks like this:
selectedTimeZone: Ember.computed('location.timezone', 'timeZones', function() {
console.log(this.get('timeZones'));
const timeZoneName = this.get('location.timezone');
var result;
this.get('timeZones').forEach(function(timeZone) {
if (timeZone.name === timeZoneName) {
console.log('yes'); // <------------------- never gets here
result = timeZone;
}
});
return result;
}),
The problem is that this.get('timeZones') isn't really accessible inside the component. timeZones makes it to the template just fine. I'm populating a dropdown with timeZones right now. But when I console.log it, it just comes through as Class.
How can I get my hands on timeZones inside this computed property?

Answer 1

actually most of this looks good, however some code is missing. Like is this a component or the controller, and if its a component how is the component invoked?
however one problem is obvious. timeZone obviously is a ember-data record, and so accessing timeZone.name is not a good idea. You should use embers .get(), either timeZone.get('name') or Ember.get(timeZone, 'name').
Next your dependency key is wrong. Because you use the name of each timeZone you should replace the dependency key timeZone with timeZone.#each.name.
Finally a bit a smaller version of your CP using findBy:
selectedTimeZone: Ember.computed('location.timezone', 'timeZones.#each.name', function() {
const timeZoneName = this.get('location.timezone');
return this.get('timeZones').findBy('name', timeZoneName);
}),
If this is not working you should verify that the data are loaded successfully into the store with the ember inspector and verify that you pass the timeZones into the component with timeZones=model.timeZones when calling the component from your controller.