Ember Data returns an array of internal models instead of actual data

Ember Data
1

I’m creating a new adapter and model and trying to fetch data to use it in my template. When I make a request in route, the data in the model looks like this: data from ember

The actual response looks like this:

actual data

I really have no idea why ember store returns the data with wrong ID’s(the first two objects are objects from the response - but the id fields don’t match) and some internal methods.

Code for the adapter:

export default DS.RESTAdapter.extend(UrlTemplates, {
  session: Ember.inject.service('session'),
  findAll() {
    const token = this.get('session.data.authenticated.access_token');
    return this.ajax(`${window.App.host}/distributor/${1}/companies?access_token=${token}`);
  }
});

Code for the router:

model() {
    return Ember.RSVP.hash({
      companies: this.store.findAll('distributor/distributors')
    });
  },

Code for the model:

export default DS.Model.extend({
  Name: DS.attr('string'),
  demo: DS.attr('number'),
  devices: DS.hasMany('distributor/devices', { async: true })
});

As you can see, this is pretty usual process.If I log data from the request in route, it is already mixed up. Considering Ember Data’s data flow I assume that the data is being mixed up in the store. Is there any way to fix this?

2

Hi @Andrei_Kulagin, I don’t think the fix should be very difficult.

At first glance I’d guess that the problem is definitely happening in your serializer (or the default if you don’t have one) and this is caused by one of two things: 1. your custom adapter code or 2. your backend returns data in a format that Ember doesn’t expect so you may need a bit of custom serialization code.

It looks like you’re overriding the adapter mostly to pass the access token in the URL instead of the request headers. There are a number of ways to do this but you’re doing it the “heavier” way, meaning you’re overriding more than you need to. In the above not only are you specifying the URL but you’re also making the fetch call in your adapter. I’d recommend trying to override as little as possible, so instead of overriding findAll I’d recommend simply overriding urlForFindAll. This lets you customize the request URL but delegates the rest so Ember Data can still do the fetch however it wants.

Second, and this is more guesswork on my part… since you’re using RESTAdapter you’re probably using RESTSerializer (whether explicitly or implicitly). IIRC the RESTSerializer expects array responses in the form: { <modelType>: [{...}, {...}, ...] }but your server looks like it’s returning the “unwrapped” array (which IIRC is actually the format that JSONSerializer expects). So you could either use JSONSerializer or “wrap” the responses manually, probably by customizing normalizeArrayResponse. Anyway like I said I’m just guessing at some stuff here so feel free to provide more details about your serializer and server responses too.

What serializers to use can be very confusing (IMO the serializer names are unintuitive and there is a broad API surface) so definitely post any follow up questions here. Also note that I posted links to latest release docs but if you’re using an older version of Ember there might be subtle differences, especially because Ember Data was recently modularized.