ArrayProxy expects an Array or Ember.ArrayProxy, but you passed object - ember.js

Question

I am getting this error:
ArrayProxy expects an Array or Ember.ArrayProxy, but you passed object
I am getting my data from a rails application using active-model-serializers. The data is showing in mhy ember inspector but my template is not rendering properly with this error in the console.
Router.map(function() {
this.resource('brands', function() {
this.resource('brand', { path: '/:brand_id' });
});
this.resource('campaigns', function() {
this.resource('campaign', { path: '/:campaign_id' },
this.resource('index'), { path: 'brands/:brand_id' });
});
});
export default Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
brand: this.store.find('brand'),
campaign: this.store.find('campaign')
});
}
});
export default DS.Model.extend({
name: DS.attr('string'),
facebook_page_id: DS.attr('string'),
active: DS.attr('boolean'),
facebook_uid: DS.attr('string'),
facebook_token: DS.attr('string'),
facebook_token_expires: DS.attr('string'),
website_url: DS.attr('string'),
privacy_policy_link: DS.attr('string'),
terms_link: DS.attr('string'),
instagram_account: DS.attr('string'),
instagram_url: DS.attr('string'),
twitter_account: DS.attr('string'),
twitter_url: DS.attr('string'),
avatar_url: DS.attr('string'),
youtube_account: DS.attr('string'),
youtube_url: DS.attr('string'),
favicon_url: DS.attr('string'),
open_graph_url: DS.attr('string'),
campaigns: DS.hasMany('campaign', {async: true})
});
export default DS.Model.extend({
name: DS.attr('string'),
brand_id: DS.attr('string'),
brand: DS.belongsTo('brand', {async: true})
});
{{#each brand in controller}}
<a>
{{#link-to 'brand' this}}
{{brand.name}}
{{/link-to}}
</a>
{{else}}
<a>No brands found.</a>
{{/each}}
No errors in the server logs.

Answer 1

Embers default index controllers are ArrayControllers that expect their model to be an array.
In the model hook of - what appears to be - your BrandsIndexRoute you specified the model as
Ember.RSVP.hash({
brand: this.store.find('brand'),
campaign: this.store.find('campaign')
});
Which returns a single object, not an array of brands as is expected.
What you should do instead is something like:
//brands route
export default Ember.Route.extend({
model: function() {
return this.store.find('brand');
}
});
//campaigns route
export default Ember.Route.extend({
model: function() {
return this.store.find('campaign');
}
});

Answer 2

You're trying to iterate over the controller, but your controller is decorating a object with two properties on it, not an array. Your object looks like this:
{
brand: [...],
campaign: [...]
}
Additionally if you have a controller defined as an array controller it will throw this error (which is what I'm guessing is really happening). Because you're passing an object to your controller, instead of an array.