Ember app not reading API, using hapijs I believe my API is fine just an ember issue

Question

so I started building an app that uses ember and hapi to learn both.

I have pasted the snippets below but I also have both the server and ember app available in a repo here, https://github.com/jrutishauser/contactsApp if you are interested in viewing what I have there.

I have my hapi server showing the below from my sql server

{"data":[{"id":1,"first_name":"Joe","middle_initial":null,"last_name":"Smith","title":null,"phone_number":"(555) 111-2222","email":"[email protected]","street_address":"123 Some Street","city":"Salt Lake City","state":"Utah","zip_code":"84111","created_at":1456988902625,"updated_at":1456988902625},{"id":2,"first_name":"John","middle_initial":null,"last_name":"Jones","title":null,"phone_number":"(555) 222-3333","email":"[email protected]","street_address":"1432 Another Street","city":"Montgomery","state":"Alabama","zip_code":"99291","created_at":1456988902625,"updated_at":1456988902625},{"id":3,"first_name":"Joe","middle_initial":null,"last_name":"Smith","title":null,"phone_number":"(555) 111-2222","email":"[email protected]","street_address":"123 Some Street","city":"Salt Lake City","state":"Utah","zip_code":"84111","created_at":1457588539468,"updated_at":1457588539468},{"id":4,"first_name":"John","middle_initial":null,"last_name":"Jones","title":null,"phone_number":"(555) 222-3333","email":"[email protected]","street_address":"1432 Another Street","city":"Montgomery","state":"Alabama","zip_code":"99291","created_at":1457588539468,"updated_at":1457588539468}]}

at

http://localhost:3000/api/contacts

my ember app has these files below containing,

adapters/application.js,

  1 import DS from 'ember-data';
  3 export default DS.JSONAPIAdapter.extend({
  4   namespace: 'api',        
  5   host: 'http://localhost:3000'
  6 });

models/contact.js,

  1 import DS from 'ember-data';

  3 export default DS.Model.extend({
  5   firstName: DS.attr('string'),
  6   lastName: DS.attr('string'),
  7   middleInitial: DS.attr('string'),
  8   title: DS.attr('string'),
  9   phoneNumber: DS.attr('string'), 
  10   email: DS.attr('string'),
  11   streetAddress: DS.attr('string'),
  12   city: DS.attr('string'),
  13   state: DS.attr('string'),
  14   zipCode: DS.attr('string'),
  15   createdAt: DS.attr('date'),
  16   updatedAt: DS.attr('date')  
  17 });

routes/contacts.js

  1 import Ember from 'ember'; 
  2                            
  3 export default Ember.Route.extend({
  4     model: function(){     
  5         return this.store.findAll('contact');
  6     }                      
  7 });

I also set this up under serializers/application.js but dont think its necessary since I dont need to normalize anything

  1 import DS from 'ember-data';
  2 
  3 export default DS.JSONAPISerializer.extend({
  4   primaryKey: 'id',
  5   serializeId: function(id) {
  6     return id.toString();
  7   }
  8 });

templates/contacts.hbs

  1 <ul>  
  2   {{#each contact in model}}
  3       <li>{{#link-to 'contact' contact}}{{contact.firstName}}{{/link-to}}</li>
  4   {{/each}}
  5 </ul>  
  6 
  7 {{outlet}}

All Im expecting is the contacts route to just show the list currently from the api, I am not done with this yet and have been stuck here for some time.

the console errors I get are,

ember.debug.js:28590 Error while processing route: contacts.index Assertion Failed: You may not set `id` as an attribute on your model. Please remove any lines that look like: `id: DS.attr('<type>')` from (unknown mixin) Error: Assertion Failed: You may not set `id` as an attribute on your model. Please remove any lines that look like: `id: DS.attr('<type>')` from (unknown mixin)

and

Error: Assertion Failed: Encountered a resource object with an undefined type (resolved resource using contacts-app@serializer:application:)

Altrim Altrim · Accepted Answer · 2016-03-27T12:00:46

If you are using Ember Data by default it uses the JSONAPISerializer to serialize and deserialize records.

The JSONApiSerializer supports the http://jsonapi.org/ spec.

For that to work you need to return the data from the server according to the JSON API spec or normalize the data in the serializer in your ember app.

You can look at the example in the Ember guides that explains this http://emberjs.com/api/data/classes/DS.JSONAPISerializer.html

You can also check plugins that implement the spec here http://jsonapi.org/implementations/#client-libraries-javascript. Looks like there is a plugin for the hapi framework (https://github.com/wraithgar/hapi-json-api) since you are using that it might help.

Ember app not reading API, using hapijs I believe my API is fine just an ember issue

1 Answers