How to access nested object properties in 3.0+?

Questions
1

We are in the process of trying to upgrade our Ember application from 2.15.3 → 3.1 and am running into a major problem.

Given that we have a simple typeahead that makes an AJAX call to get a list of recipients, we set that to a property with this.set(‘recipientList’, Ember.Object.create(response)). The response looks something like this:

“recipients”: { “total”: 1, “per_page”: 3, “current_page”: 1, “last_page”: 1, “next_page_url”: null, “prev_page_url”: null, “from”: 1, “to”: 1, “data”: [{ “user_id”: 1234, “user_type”: 10, “name”: “Some recipient” }] } }

We later pass this into a nested component as a property: {{dropdownList items=recipientList}}

Inside that component, in 2.15.3 we were able to access the array “data” by doing this.get(‘items.recipients.data’). Now, with the same exact code in 3.0 and 3.1, this.get(‘items.recipients.data’) comes back as undefined. this.get(‘items.recipients’) is also undefined. I can log out this.get(‘items’) and see the recipients object but I can’t seem to access it anymore.

I see there are ES5 getter/setter changes in the release notes but I still can’t figure out how to get this to work. Any tips?

Edit: I will try to provide a link that can reproduce this issue tonight.

2

After digging in deeper, this was a combination of problems on my side. First, I was enabling the dropdown before the promise had resolved with the data to pass into the child component. Second, in Ember 3.0, the Enumerable#contains method was removed. My code was using that method in a computed property to pass into ember-truth-helpers which resulted in a silent fail.

3

Thanks for sharing the ultimate culprit with us!