EmberCLI + Rails API

1

I’m trying to get to work EmberCLI frontend app with my Rails API. For some reason it does not work. When I visit ‘localhost:4200/artists’ I see nothing but h1 tag. No API data. JS Console is empty. Any ideas?

Here’s my adapter:

import JSONAPIAdapter from 'ember-data/adapters/json-api';

export default JSONAPIAdapter.extend({
  host: 'http://localhost:3000'
});

Model:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  itunes_id: DS.attr('integer'),

});

Router:

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

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

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

export default Router;

Route:

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.findAll('artist');
  }
});

And view:

<h1> Artists </h1>
    <ul>
      {{#each artists as |artist|}}
        <li>Hello, {{artist.name}}!</li>
      {{/each}}
    </ul>
2

Hey, have you also set the host and namespace right for your rails API in the adapters/application.js? Here is the link to the docs: Connecting to an HTTP Server - Models - Ember Guides

If your Rails API is on localhost:3000 (at least in local development) and you have your routes under the namespace /api, your adapters/application.js should look like this:

App.PostAdapter = DS.RESTAdapter.extend({
  namespace: 'api',
  host: 'https://localhost:3000'
});
3

Hello, thank you for your reply.

I have it, my bad I forgot to put it here.

Considering that I have it all and it still doesn’t work, maybe there’s something wrong with my backend?

4

Your template is wrong, you have to loop over model and not artist :slight_smile:

{{#each model as |artist|}}
      Hello, {{artist.name}}
{{/each}}

This is also the reason why you don’t get any errors in the console. Since the template doesn’t use model, you don’t resolve the promise.

To prevent this in the future: I’d have debugged this with {{log artists}} in my template. Then I’d have seen that {{artists}} is empty and so on… Hope this helps now!

1 Like
5

Thank you man, made my day.

1 Like