0

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.

garthcodes
  • 91
  • 1
  • 6

2 Answers2

0

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');
  }
});
Lazybensch
  • 506
  • 2
  • 5
  • No route is defaulted to any specific controller type, if no controller type is specified it divines the controller type based on the data type returned from the model hook. https://github.com/emberjs/ember.js/blob/876eecf6ab29159b1ef5474f2c62da139bb636c0/packages/ember-routing/lib/system/generate_controller.js#L26 – Kingpin2k Dec 22 '14 at 16:46
  • This is what I was originally doing, I want to view the data on the same template. thanks for our help. – garthcodes Dec 22 '14 at 16:46
0

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.

Kingpin2k
  • 47,277
  • 10
  • 78
  • 96