How to make serializer get called

Question

I'm using ember cli

ember 1.12.0 ember data 1.0.0-beta.18

router.js:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('datasource');
});

//export default Router;
export default Router;

routes/datasource.js:

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    // the model is an Array of all of the posts
    // fetched from this url
    return Ember.$.ajax('/datasource/');
    //return [{'datasource': '1'}, {'datasource': '2'}];
  }
});

adapters/application.js:

import DS from 'ember-data';

export default DS.Adapter.extend({
  // ...your code here
});

models/datasource.js:

import DS from 'ember-data';
export default DS.Model.extend({
  dsn: DS.attr()
});

serializers/datasource.js:

import DS from 'ember-data';

export default DS.RESTSerializer.extend({

  extractArray: function(store, type, payload) {

    var datasources = payload._items;

    payload = {datasources: datasources};

    return this._super(store, type, payload);

  }


});

Ie my api returns the list of items inside the key _items.

But it looks like the serializer is never executed,

What should I do to make the serializer take effect?

This is the error -

Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed '{_items: [object Object],[object Object], _links: [object Object], _meta: [object Object]}' (wrapped in (generated datasource controller))Ember.default.assert @ ember.debug.js:4854exports.default.CollectionView.default.extend._assertArrayLike @ ember.debug.js:38837(anonymous function) @ ember.debug.js:37836ContainerView.default.extend.init @ ember.debug.js:37804superWrapper @ ember.debug.js:17426superFunction @ ember.debug.js:13805mixin.Mixin.create.init @ ember.debug.js:38898superWrapper @ ember.debug.js:17426superFunction @ ember.debug.js:13805exports.default.CollectionView.default.extend.init @ ember.debug.js:38832superWrapper @ ember.debug.js:17426Class @ ember.debug.js:30649ClassMixinProps.create @ ember.debug.js:31071mixin.Mixin.create.createChildView @ ember.debug.js:35755merge.default.appendChild @ ember.debug.js:39847mixin.Mixin.create.appendChild @ ember.debug.js:35697appendTemplatedView @ ember.debug.js:8051viewHelper @ ember.debug.js:7559collectionHelper @ ember.debug.js:6410eachHelper @ ember.debug.js:6598block @ ember.debug.js:7807render @ datasource.js:89renderHTMLBarsTemplate @ ember.debug.js:8491renderView @ ember.debug.js:8463renderView @ ember.debug.js:35400mixin.Mixin.create.render @ ember.debug.js:35423EmberRenderer_createElement @ ember.debug.js:37468Renderer_renderTree @ ember.debug.js:9140scheduledRenderTree @ ember.debug.js:9216Queue.invoke @ ember.debug.js:878Queue.flush @ ember.debug.js:943DeferredActionQueues.flush @ ember.debug.js:748Backburner.end @ ember.debug.js:173(anonymous function) @ ember.debug.js:576

Answer 1

In the model hook of your route you are doing a ajax call instead of calling the store to find records. With the ajax call you are bypassing your store and so the serializer will never be called to serialize the payload returned from your server.

In order to pass the payload to the store you can do:

// route
model: function() {
    var store = this.store;
    return Ember.$.ajax('/datasource/').then(function(payload) {
        store.pushPayload('datasource', payload);
    });
}

Alternatively you can call the store to do the call to your back-end so you don't have to do a ajax call yourself (not sure if it was your intention to do a custom call for some reason):

// route
model: function() {
    return this.store.find('datasource');
}