this.get(...).then is not a function when using init: ember.js - ember.js

Question

I am using init() in my component to load some data for a dropdown. On refresh it works but when I leave the tab to another tab then come back I get the following error:
index.js:143322 Uncaught TypeError: this.get(...).then is not a function
This code is in my init function and I suspect it has something to do with how ember.js renders but I am struggling to figure out how to make it work. I tried using the other lifestyle hooks but none of them worked.
This is the init function which is in a component:
init() {
this._super(...arguments)
this.get('popularTags').then(function(result) {
const newArray = []
for (var i = 0; i < result.length; i++) {
newArray.push({
name: result[i],
value: result[i],
group: 'Popular'
})
}
const popularTags = this.get('popularTags')
this.set('popularTags', newArray)
this.get('queryResults').then(function(result) {
const tagArray = []
for (var i = 0; i < result.length; i++) {
let popular = newArray.filter(tag => tag['value'] === result[i].value)
if (popular.length === 0) {
tagArray.push({
name: result[i].value,
value: result[i].value,
group: ''
})
}
}
const queryResults = this.get('queryResults')
return this.set('queryResults', tagArray)
}.bind(this))
}.bind(this))
},

Answer 1

There is something about your above example that I just don't understand. You seem to be getting and setting both the popularTags and queryResults properties. I'm not sure if that's just an issue in your example or something else - I'm going to assume it's an example issue and break this down a bit more generally:
Doing this much work in init isn't generally a good idea, so much so that it is slated for removal from the upcoming glimmer component API. In particular set inside any of the lifecycle hooks is a recipe for weird errors when the component gets removed from the DOM. While you can use a tool like ember-concurrency to help break this up and deal with set my suggestion would be to split this up into several computed properties. This might look something like:
import Component from '#ember/component';
import { computed } from '#ember/object';
export default Component.extend({
popularTags: computed('tags.[]', function(){
return this.tags.filter(tag => tag.isPopular);
}),
queryResults: computed('popularTags.[]', function(){
return this.popularTags.map(tag => {
return {
name: tag.name,
value: tag.description
};
});
}),
});
Computed Properties like these are the way to express data transformations in Ember. They rely on some initial data that is passed into the component and then modify it for use. In my above example I've assumed that tags gets passed in, but you can see that queryResults relies on the results of popularTags, in this way several different data transformations can be executed in order.
While loading asyncronous data in components can work just fine when you are first building and Ember.js application I would suggest that you confine all of your data loading to the Route's Model Hook as it is better suited to async work and will then give you data you can pass directly into the component without needing to worry about the difficulties in loading it there.

Answer 2

Your problem could be that youre calling the component with curlies and passing popularTags:
{{your-component popularTags=something}}
This is two-way bound. Precisely this means that changing popularTags inside the component will change something on the caller.
This means that if you remove this component and re-create it later (what your mention of some tabbing indicates) you've changes something on the outside. And your component expects popularTags (and so something) to be a promise (when calling this.get('popularTags').then). However because you changes it (with this.set('popularTags', newArray)) its no longer a promise but an array.
Generally I would recommend you to be careful when changing passed attributes.