How to display nested related model data in ember.js?

@lottie 

To display nested related model data in Ember.js, you need to follow these steps:

1. Define the relationships between your models in the Ember Data models. For example, if you have a Post model that has many Comments, you would define the relationship in the model like this:

1
2
3
4
5
6
7
8
9

// post.js
import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string'),
  body: DS.attr('string'),
  
  comments: DS.hasMany('comment')
});

1. In your template where you want to display the nested related data, you can use the {{#each}} helper to iterate over the related records. For example, you can display the comments for a post like this:

1
2
3
4
5

{{#each post.comments as |comment|}}
  <div>
    {{comment.body}}
  </div>
{{/each}}

1. Make sure that when fetching the data for the parent model (in this case Post), you also include the related data for the nested model (in this case Comments). You can use the include query parameter to do this. For example, in your route file, you can fetch the post and include the comments like this:

1
2
3
4
5
6
7
8

// posts.js
import Route from '@ember/routing/route';

export default Route.extend({
  model(params) {
    return this.store.findRecord('post', params.post_id, { include: 'comments' });
  }
});

By following these steps, you can display nested related model data in Ember.js templates. Make sure to define the relationships correctly in your Ember Data models and include the related data when fetching the parent model.