### Author:  [@commadelimited](https://discuss.emberjs.com/u/commadelimited)
#### Post date: [June 29, 2014, 5:21am UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/1 "2014-06-29T05:21:53Z")
I have a fairly simply app I’m working on. The `ApplicationRoute` loads a list of categories and displays them:
- Videos
- Articles
Clicking on each of these loads the `CategoryRoute`:
```auto
/videos/
/articles/
```
Within the `CategoryRoute` I’d like to load a list of `Items` to be displayed within that route:
```auto
/videos/video-one
/articles/article-one
/articles/article-two
```
This seems like it should be really simple, but I can’t figure it out. Here’s the code I’ve got so far, could I please get some input?
The index page loads just fine, I can click into a category and that loads fine as well. I’m just having trouble trying to load the list of items relevant to a specific category.
Note that I haven’t begun implementing a “details” view for each individual item. That’ll come later.
```auto
var App = Ember.Application.create();
App.Router.map(function() {
this.resource('index', { path: '/'});
this.resource('category', { path: '/:category_id'});
});
App.ApplicationRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('category');
}
});
App.CategoryRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('category', params.category_id);
}
});
App.Category = DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
items: DS.hasMany('item'),
});
App.Item = DS.Model.extend({
category: DS.belongsTo('category'),
name: DS.attr('string'),
description: DS.attr('string'),
url: DS.attr('string'),
repository: DS.attr('string')
});
```
---
### Author:  [@Hummingbird](https://discuss.emberjs.com/u/Hummingbird)
#### Post date: [June 29, 2014, 3:18pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/2 "2014-06-29T15:18:09Z")
I think I was just figuring out a similar problem: Does this help? [ember.js - Ember js: Render Nested Navigation Sidebar together with a main view - Stack Overflow](http://stackoverflow.com/a/24477302/473950)
---
### Author:  [@commadelimited](https://discuss.emberjs.com/u/commadelimited)
#### Post date: [June 30, 2014, 2:22am UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/4 "2014-06-30T02:22:42Z")
Okay. Progress, but I’m getting weird behavior now. Here’s the updated CategoryRoute:
```auto
App.CategoryRoute = Ember.Route.extend({
model: function (params) {
return Ember.RSVP.hash({
category: this.store.find('category', params.category_id),
items: this.store.find('item', params.category_id)
});
}
});
```
When I click from `/` to `/components` I see no API call, but I do get the following error:
```auto
Uncaught Error: Assertion Failed: You looked up the 'items' relationship on '' but some of the associated records were not loaded. Either make sure they are all loaded together with the parent record
```
If I simply reload the page I see an API call to `/api/items/components` which returns 2 hard-coded items, but only displays the first. That seems consistent with the `find` method which `Returns the first item in the array for which the callback returns true`. So I changed:
```auto
// this line
items: this.store.find('item', params.category_id)
// to this:
items: this.store.find('item', {category: params.category_id})
```
Then I get the same error as previous when clicking into the route, but when I reload I get an API call to `/api/items?category=components` instead of `/api/items/components`. This method does however work, and I get the correct data on the page.
So I have two questions. 1) Why isn’t the item data loading when I click into the route? 2) I’d prefer to call an API endpoint directly rather than passing a query string. How can I accomplish this?
---
### Author:  [@commadelimited](https://discuss.emberjs.com/u/commadelimited)
#### Post date: [June 30, 2014, 4:02pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/5 "2014-06-30T16:02:28Z")
Anyone have ideas on the last issue I’m having?
---
### Author:  [@Panman8201](https://discuss.emberjs.com/u/Panman8201)
#### Post date: [June 30, 2014, 5:51pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/6 "2014-06-30T17:51:18Z")
These are both Ember Data issues. I’ve only been toying with Fixtures so far so maybe someone else can clarify if incorrect;
1. I believe if you pass in the model with a `{{link-to}}` helper, the Router `model:` hook will not fire. But if you refresh, then the router fires the model `find()` for you.
2. That is a drawback to the current Ember Data adapter, there has been [discussion](http://discuss.emberjs.com/t/nested-urls-for-ember-datas-restadapter-proposal/5290) about it. If you haven’t yet, I’d recommend reading the latest [Ember Data article](http://www.toptal.com/emberjs/a-thorough-guide-to-ember-data) from last week.
---
### Author:  [@commadelimited](https://discuss.emberjs.com/u/commadelimited)
#### Post date: [June 30, 2014, 7:46pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/7 "2014-06-30T19:46:49Z")
That makes total sense. Thanks for your input.
---
### Author:  [@Panman8201](https://discuss.emberjs.com/u/Panman8201)
#### Post date: [June 30, 2014, 8:11pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/8 "2014-06-30T20:11:51Z")
Glad to help, you’ve helped me with ColdFusion and jQM things as well.
I forgot to mention, for #1, did you define the [relation as `{async:true}`](http://emberjs.com/api/data/#method_belongsTo) on your Model? That was my point for linking the Ember Data article. Not sure how I mixed that up…
---
### Author:  [@commadelimited](https://discuss.emberjs.com/u/commadelimited)
#### Post date: [June 30, 2014, 8:40pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/9 "2014-06-30T20:40:36Z")
Well then, that’s what paying it forward is I guess! I’ll take a look at making the relationship async and see if that helps.
---
### Author:  [@commadelimited](https://discuss.emberjs.com/u/commadelimited)
#### Post date: [July 2, 2014, 1:06am UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/10 "2014-07-02T01:06:28Z")
FYI, adding async: true stopped the errors. Ember still doesn’t go off and retrieve the `items` on click like it does when the page is reloaded. I’ll open a new question about that though. Thanks!
---
### Author:  [@mikepmunroe](https://discuss.emberjs.com/u/mikepmunroe)
#### Post date: [July 3, 2014, 8:17pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/11 "2014-07-03T20:17:53Z")
I wrote a blog post recently covering this exact topic that might be of help to others that come across this post, [Transform Your Customer Experience | Rightpoint](http://blog.greenfieldhq.com/lessons/2014/06/13/render-data-for-mulitple-models-in-a-view-in-Ember/)
---
### Author:  [@nandosan](https://discuss.emberjs.com/u/nandosan)
#### Post date: [July 6, 2014, 11:11pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/12 "2014-07-06T23:11:34Z")
From the tutorial linked:
I don’t see the point of RSVP hashing in `model` hook. Wouldn’t have the same result set the variables directly in the `controller` hook instead of `find`ing and hashing them in `model` only for de-hashing in the controller hook? Something like:
```
setupController: function(controller, model) {
var users = this.store.findAll('user');
var tweets = this.store.findAll('tweet');
controller.set('users', users);
controller.set('tweets', tweet);
}
```
According to Ember docs, router should wait for promise resolution even if they are created in the controller hook…
---
### Author:  [@mikepmunroe](https://discuss.emberjs.com/u/mikepmunroe)
#### Post date: [July 7, 2014, 7:34pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/13 "2014-07-07T19:34:36Z")
@nandosan, your suggestion should actually work, but you will be going against [convention](http://emberjs.com/guides/routing/specifying-a-routes-model/), and there are some downsides.
The Ember docs do a better job of explaining one of those downsides for handing errors,
> This hook follows the asynchronous/promise semantics described in the documentation for beforeModel. In particular, if a promise returned from model fails, the error will be handled by the error hook on Ember.Route.
from [http://emberjs.com/api/classes/Ember.Route.html#method\_model](http://emberjs.com/api/classes/Ember.Route.html#method_model)
Some other downsides are that I’m fairly certain that this would prohibit the use of [beforeModel](http://emberjs.com/api/classes/Ember.Route.html#method_beforeModel) and [afterModel](http://emberjs.com/api/classes/Ember.Route.html#method_afterModel), as well, if needed.
---
### Author:  [@Panman8201](https://discuss.emberjs.com/u/Panman8201)
#### Post date: [July 8, 2014, 12:30pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/14 "2014-07-08T12:30:57Z")
@mikepmunroe Why use an `ArrayController`? I believe you can still iterate over the records in the `{{#each}}` without it. A simpler solution would be to use the `ObjectController` instead, as that will pass the `users` and `tweets` request directly to the model hash/object, eliminating the need for `setupController()`.
app/routes/foo.js
```
App.FooRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
users: this.store.findAll('user'),
tweets: this.store.findAll('tweet')
});
}
});
```
app/controllers/foo.js
```
App.FooController = Ember.ObjectController.extend({});
```
app/templates/foo.hbs
```
{{#each users}}
- {{name}}
{{/each}}
{{#each tweets}}
- {{content}}
{{/each}}
```
---
### Author:  [@mikepmunroe](https://discuss.emberjs.com/u/mikepmunroe)
#### Post date: [July 10, 2014, 8:28pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/15 "2014-07-10T20:28:43Z")
@Panman8201, great suggestion. The first time I used this pattern I used an ArrayController, but using an ObjectController does make the code simpler and cleaner. I updated my post with these changes.
---
### Author:  [@daniel](https://discuss.emberjs.com/u/daniel)
#### Post date: [December 8, 2014, 2:05am UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/16 "2014-12-08T02:05:27Z")
So fetching multiple models in a single route is not very straight forward - does that imply we should not be doing this?
Is the “ember way” to create a new data endpoint that gets the aggregated data? Then simply use that single model for the route?
---
### Author:  [@ahnbizcad](https://discuss.emberjs.com/u/ahnbizcad)
#### Post date: [April 18, 2015, 10:56pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/17 "2015-04-18T22:56:50Z")
> [@Panman8201](#):
>
> or you. That is a drawback to the current Ember Data adap
can you access params from setupController?
if your model updates based on query params, then using refreshModel: true for query params won’t fire the setupController hook.
---
### Author:  [@ahnbizcad](https://discuss.emberjs.com/u/ahnbizcad)
#### Post date: [April 18, 2015, 10:57pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/18 "2015-04-18T22:57:45Z")
as of april 2015, i believe array controllera and object controller are deprecated, and you should use controller instead.
---
### Author:  [@emberigniter](https://discuss.emberjs.com/u/emberigniter)
#### Post date: [April 29, 2016, 4:17pm UTC](https://discuss.emberjs.com/t/loading-multiple-models-in-a-single-route/5794/19 "2016-04-29T16:17:27Z")
> [@daniel](#):
>
> Is the “ember way” to create a new data endpoint that gets the aggregated data? Then simply use that single model for the route?
Not really. There are some specific use-cases in which you may need to load multiple models separately, without aggregating them under a new entity.
A good example for this is a dashboard, where you may need to load very different models or collections. Routes can do this (mostly via `RSVP.hash`) and so can data-loading components through the use of Services. I wrote about this topic a few months back: [http://emberigniter.com/load-multiple-models-single-route/](http://emberigniter.com/load-multiple-models-single-route/)
`ArrayController` and `ObjectController` read like prehistoric words nowadays 🙂 And it is totally possible to load multiple models without even the use of controllers.