template won't render from model object after sorting - ember.js

Question

I am sorting an array of objects queried from Ember-Data by 'type'-key before returning them in the model()-method of an Ember.Route to be rendered.
app/routes/test.js
export default Ember.Route.extend({
model() {
let obj = Ember.Object.create({a: [], b: [], c: []});
this.get('store').findAll('obj').then(function(unsorted){
unsorted.forEach(function(item) {// sort per type
obj.get(item.get('type')).addObject(item);
});
return obj;
});
}
});
The array returned by (the promise of) the Ember-Data query looks like this (all objects have Ember internal properties)
[
{
_id: '1',
type: 'a',
properties: {...}
},
{
...
},
{
_id: '15',
type: 'b',
properties: {...}
}
]
And the new object with objects sorted by "type"-key looks like this
{
a: [{
_id: '1',
type: 'a',
properties: {...}
},
...
],
b: [
... ,
{
_id: '15',
type: 'b',
properties: {...}
},
c: [...]
};
app/routes/test.hbs
<h2>Test</h2>
<h3>Type a</h3>
{{#each model.a as |source|}}
<div>
{{source.properties.prop1}}
</div>
{{/each}}
The template doesn't render the part that loops over the array, nor does the Ember-inspector plugin list the Model property under "Own properties" of the route (right panel in "View tree"-mode).
However, when returning a POJO (literally pasting object with array's by key in code) everything behaves as expected.
I suspect this has something to do with the internal (Ember-)properties of the objects returned by Ember-data (I have read about the owner of an object etc.) but I can't seem to figure this out ...

Answer 1

The answer of #Pavol gets to the basic problem, however return this.store...then(...) will work because this is how promises work. Read the documentation.
So this will work:
model() {
let obj = Ember.Object.create({a: [], b: [], c: []});
return this.get('store').findAll('obj').then(function(unsorted){
unsorted.forEach(function(item) {// sort per type
obj.get(item.get('type')).addObject(item);
});
return obj;
});
}
.then(onFulfilled) returns a new promise, that will resolve with the return value of the onFulfilled-callback. Creating a new promise with new Promise(...) is always totally useless if you already have promises and only for interoperability with callback-style code.

Answer 2

You are missing return statement in your model() hook:
export default Ember.Route.extend({
model() {
let obj = Ember.Object.create({a: [], b: [], c: []});
this.get('store').findAll('obj').then(function(unsorted){
unsorted.forEach(function(item) {// sort per type
obj.get(item.get('type')).addObject(item);
});
return obj;
});
// no return value before, findAll() returns promise, thus model() returns undefined
}
});
However, adding return this.store... won't solve your situation since you are updating different object after your promise is solved (the then() function).
I would recommend wrapping it in a promise and resolve it passing a modified object based on your sorting logic.
Note: I did not consider whether sorting at this stage makes sense and is of 'Ember-way'. Sorting usually happens via computed properties on controller/component level.
export default Ember.Route.extend({
model() {
return new Ember.RSVP.Promise((resolve)=>{
let obj = Ember.Object.create({a: [], b: [], c: []});
this.get('store').findAll('obj').then(function(unsorted){
unsorted.forEach(function(item) {// sort per type
obj.get(item.get('type')).addObject(item);
});
resolve(obj);
});
});
}
});
Update: Of course this.store() returns a valid promise (which I pointed out in the snippet but explained incorrectly later) and so you do not have to wrap it, sorry for the confusement! I haven´t realized that return value of the callback passed to then() is automatically internally passed in a promise, although I use promise chaining and this on a daily basis, too. Shame on me! Thx #Lux for putting this on a right way.