Ember CLI: Push a custom record in store

Question

So I have this requirement where when I go to a whitelist route, I fetch a list of whitelisted users from an API. My models and serializers are like this:

models/whitelist.js

import BaseUser from './base-user';
var Whitelist = BaseUser.extend({});
export default Whitelist;

models/base-user.js

import Ember from 'ember';
import DS from 'ember-data';

var attr = DS.attr;

export default DS.Model.extend({
  name: attr(),
  username: attr(),
  description: attr(),
  profilePicture: attr(),
  followersCount: attr(),
  followsCount: attr(),
  postCount: attr(),
  verified: attr(),
  following: attr('boolean'),
  whitelisted: attr('boolean'),
  blacklisted: attr('boolean'),
  unfollow: followUnfollow,
  follow: followUnfollow,
  whitelist: whitelist,
  unwhitelist: unWhitelist,
  blacklist: blacklist,
  unblacklist: unBlacklist,
  reply: reply,
  getLists: getLists,
  createdAt: attr()
});

serializers/base.js

import DS from 'ember-data';

var serializeCollection = function(store, type, payload, id, requestType) {
  payload.records = payload.records ? payload.records : [];
  var users = payload.records.map(function(record) {
    record = record.user ? record.user : record;
    var user = {
      id: record.id,
      name: record.name || record.fullName,
      username: record.screenName || record.username,
      description: record.description || record.bio,
      profilePicture: record.profileImageURLHttps || record.profilePicture,
      followersCount: record.followersCount,
      followsCount: record.friendsCount || record.followsCount,
      postCount: record.statusesCount || 0,
      verified: record.verified || false,
      createdAt: record.createdAt || false
    };
    return user;
  });
  return users;
};

export default DS.RESTSerializer.extend({
  extractFindAll: serializeCollection,
  extractFindQuery: serializeCollection
});

serializers/whitelist.js

import Ember from 'ember';
import Base from './base';


var serializeCollection = function(store, type, payload, id, requestType) {
  /* Here payload is of the form:
   * {
   *    cursor: null,
   *    records: [{
   *      user: {}
   *      friendship: {}
   *    }]
   * }
   */
  var data = this._super(store, type, payload, id, requestType);
  return data.map(function(item) {
    return Ember.$.extend(item, {
      following: true,
      whitelisted: true,
      blacklisted: false
    });
  });
};

export default Base.extend({
  extractFindAll: serializeCollection,
  extractFindQuery: serializeCollection
});

Now based on some action, I fetch a new record in the controller like this:

actions: {
  addToWhitelist: function() {
    var _this = this;
    Ember.$.get(url).then(function(data) {
      /*
       *The data here is in this form
       * {
       *   frienship: {},
       *   user: {}
       * }
       */

       //What should I do here so that my serializers get called?

    });
    return false;
  }
}

What should I do so that I can push a record into my already populated store, such that the serializers will be called, first whitelist serializer and then from within it, the application serializer?

Answer 1

While ED and I both will suggest you REST API. But sometime you may not have control over your API.

Ember.Store.pushPayload is what you are looking for. This method accept raw JSON data in correct format and push it to your local store models.

A working sample for you may look like

actions: {
  addToWhitelist: function() {
    var self = this;
    Ember.$.get(url).then(function(data) {
       self.store.pushPayload(data);
    });
    return false;
  }
}

Answer 2

you shouldn't use the Ember.$.get to benefit from ember-data. You probably wanted to create a record in the following way:

actions: {
  addToWhitelist: function() {
    var record = this.store.createRecord('whitelist', { /* your record */ });
    record.save().then(function() {
      // here's after the POST / PUT requests were done
    });
  }
}

Does this help?