Cannot get Rails REST API to work with Ember.js

Question

I'm busy following this Ember.js tutorial, but I'm trying to implement it using the Ember 2.0 way of doing things (modules, using Ember CLI and the ember-cli-rails gem). It's rather difficult since none of the Ember guides follow these conventions.

As per the tutorial, I'm using Rails as a JSON API and it looks like everything works like it should in terms of serving the proper JSON responses. Problem is, I can't get my leads model to work.

I'm getting a TypeError: Cannot read property 'typeKey' of undefined error from ember.debug.js. I'm also getting a undefined is not a function error from ember.adapter.js

My project looks as follows:

app/store.js

  import DS from 'ember-data';

  export default DS.RESTAdapter.reopen({
    url: 'https://localhost:3000',
    namespace: 'api/1'
  });

app/router.js

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

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

Router.map(function() {
    this.resource('leads', { path: '/' });
});

export default Router;

app/adapters/application.js

import DS from "ember-data";

var ApplicationAdapter = DS.ActiveModelAdapter.extend({
    host: 'http://localhost:3000',
    namespace: 'api/v1'
});

export default ApplicationAdapter;

app/models/lead.js

import DS from 'ember-data';

export default DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  email: DS.attr('string'),
  phone: DS.attr('string'),
  status: DS.attr('string', { defaultValue: 'new' }),
  notes: DS.attr('string'),
});

app/routes/leads.js

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() { return this.store.find('lead') }
});

I don't see any HTTP requests being made to Rails, so I assume that it breaks even before trying to use the API. Can anybody please point out what I'm doing wrong here?

Yup - third paragraph from top lists the two errors I'm getting in the Chrome console. — Constant Meiring
– Constant Meiring, Commented Mar 15, 2015 at 6:12
As far as I can see there is nothing wrong with this code. Can you recreate the problem in a fiddle? BTW why are you reopening RESTAdapter? This is dangerous. — Pooyan Khosravi
– Pooyan Khosravi, Commented Mar 15, 2015 at 22:51
According to that tutorial, this is how you configure Ember Data in store.js - by using reopen. Is there another way? I've added the whole project to a Git repo here: github.com/constantm/ember-crm/tree/master/frontend. I have no idea how to get this to work with a Fiddle. :) — Constant Meiring
– Constant Meiring, Commented Mar 16, 2015 at 7:29

Constant Meiring · Accepted Answer · 2015-10-27 13:24:16Z

1

Looks like the issue was store.js, which shouldn't be used here. Not sure why, but removing it causes everything to work as it should.

UPDATE: So, upon learning more of how Ember works, I now know the issue was not the file, but that Rails returns the wrong type of json back. The Ember REST adapter expects json keys to use an underscore, eg. first_name, while Rails returns it in camel case, eg. firstName.

To use Ember with Rails, you need to use the ActiveModel adapter. The newest version of ActiveModelSerialisers(AMS) supports JSON API.

edited Oct 27, 2015 at 13:24

answered Mar 16, 2015 at 11:58

Constant Meiring

3,3354 gold badges43 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot get Rails REST API to work with Ember.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related