I'm learning Ember (3.21) and am at a loss as to why related items will not show as being attached to their parent model when retrieving from the store. I am having trouble finding answers to this question in Ember Octane, as most similar answers are for older versions and no one seems to be having this issue.
For context, I'm creating a very simple todo list app.
Looking in Ember inspector, my api returns properly and all records are added to the store:
My (JSON) rails api returns the data like so:
{
"data": {
"id": "1",
"type": "todo-lists",
"attributes": {
"title": "Test List 1",
"description": "This is the first test list."
},
"relationships": {
"todo-item": {
"data": [
{
"id": "1",
"type": "todo-items"
},
{
"id": "4",
"type": "todo-items"
},
{
"id": "5",
"type": "todo-items"
},
{
"id": "6",
"type": "todo-items"
},
{
"id": "7",
"type": "todo-items"
},
{
"id": "8",
"type": "todo-items"
},
{
"id": "9",
"type": "todo-items"
},
{
"id": "10",
"type": "todo-items"
},
{
"id": "11",
"type": "todo-items"
},
{
"id": "12",
"type": "todo-items"
},
{
"id": "13",
"type": "todo-items"
}
]
}
}
},
"included": [
{
"id": "1",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 1",
"completed": false,
"deleted": false,
"due": "2020-09-19T17:43:10.977Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "4",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 1",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:04:13.861Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "5",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 1",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:04:29.852Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "6",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 2",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:04:29.891Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "7",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 3",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:04:29.927Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "8",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 1",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:11:29.504Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "9",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 2",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:11:29.552Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "10",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 3",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:11:29.589Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "11",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 1",
"completed": false,
"deleted": false,
"due": "2020-09-21T13:23:00.793Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "12",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 2",
"completed": false,
"deleted": false,
"due": "2020-09-21T13:23:00.856Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "13",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 3",
"completed": false,
"deleted": false,
"due": "2020-09-21T13:23:00.884Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
}
]
}
todolist model:
export default class TodoListModel extends Model {
@hasMany('todoItem') todoItems;
@attr('string') title;
@attr('string') description;
}
item model:
export default class TodoItemModel extends Model {
@belongsTo('todoList') list;
@attr('string') description;
@attr('boolean') completed;
@attr('boolean') deleted;
@attr('date') due;
@attr('date') created;
}
So, i populate my model using the ember data store in TodoListsRoute:
model() {
return this.store.findAll('todo-list');
}
In todo-lists.hbs:
{{#each @model as |todoList|}}
<TodoList @todoList={{todoList}} @delete={{deleteList}}/>
{{/each}}
in todo-list.hbs (the custom component referred to as <Todolist ...>), each todo list title/description displays fine. My issue is that I cannot get any of the todo items underneath the lists to display. Here's the code where i try to do that:
<div class="todo-list-items">
<div>
<button class="delete-button" {{on 'click' deleteList}}><i class="fas fa-trash"></i></button>
</div>
{{#each @todoList.todoItems as |listItem|}}
<div>
{{listItem.id}}
</div>
{{/each}}
</div>
Logging this.args.todoList.todoItems into the console returns a full class, but it doesnt seem to contain any actual todoItem data.
Any help greatly appreciated.
Watch your relationship names: In the json, it is "todo-item" while in the code it is "todoItems". You should make it "todo-items" in the json.