Ember.js: Load related multiple models - ember.js

Question

Since the ember-guides explains how to load mutliple models on a route like that
export default Ember.Route.extend({
model() {
return Ember.RSVP.hash({
songs: this.get('store').findAll('song'),
albums: this.get('store').findAll('album')
});
}
});
Im wondering how to load only the related model-entries from a second one, like loading ALL songs but only the albums which are indexed in the songs if we assume that the song model containing this
...
albums: hasMany('album'),
...
How can I do that?

Answer 1

Assuming your adapter and JSON API backend support it, you can simply say:
export default Ember.Route.extend({
model() {
return Ember.RSVP.hash({
songs: this.get('store').findAll('song', { include: 'albums' }),
});
}
});
Typically, this will generate a GET to /songs?include=albums, which tells the JSON API backend to include the related album resources, according to http://jsonapi.org/format/#fetching-includes.
On the Ember side of things, this feature is documented at http://emberjs.com/blog/2016/05/03/ember-data-2-5-released.html#toc_code-ds-finder-include-code.
If the above isn't an option, then there's no way to load everything in one request without building a custom endpoint and using store.pushPayload.

Answer 2

Here is one way to do it
export default Ember.Route.extend({
model() {
var promise = new Ember.RSVP.Promise(function(resolve,reject){
this.store.findAll('song').then(function(songs){
var albumPromises = songs.map(fuction(s){return s.get('album')});
Em.RSVP.all(albumPromises).then(function(){
resolve(songs);
});
});
});
return promise;
}
});
So Basically you are waiting till everything is resolved.
Hope it helps!