ember-data: loading records in hasMany relationship

Question

I am trying to code feature that allows logged-in users to add products to a "saved item" list. The model is:

//saveditem.js model
export default DS.Model.extend({
    user: belongsTo('user'),
    product: belongsTo('product', { async: true }),
    dateAdded: attr('string')
});

On the saveditems route where the saved items are displayed, the model() hook is:

model() {
    return this.get("store").findAll('saveditem');
}

the api is returning records with JUST the ids:

{
    "dateAdded": "Mon, 11 Dec 2017 20:59:10 GMT",
    "id": 4458,
    "product": 4458,
    "user": "me"
},
{
    "dateAdded": "Sun, 10 Dec 2017 10:26:02 GMT",
    "id": 3657,
    "product": 3657,
    "user": "me"
}
...

How can I get the hasMany relationship to load the actual products, using the IDs?

Answer 1

I figured it out (prompted by arne.b's question). The setup was correct, but the way I was calling the items wasn't.

I was doing this in the template:

{{#each model as |result|}}
    <div>
    {{result.productName}}
    </div>
{{/each}}

Which printed empty divs because it's looping through my saveditem records, but the relationship wasn't resolving because I wasn't calling the product object itself. The correct way:

{{#each model as |result|}}
    <div>
    {{result.product.productName}}
    </div>
{{/each}}

I also needed to set async: true on the model:

export default DS.Model.extend({

    user: belongsTo('user'),
    product: belongsTo('product', { async: true }),
    dateAdded: attr('string')

});