Ember.js JSON API confusion

Question

I am currently trying to create a simple Ember Application with Ember version 2.2.0 and Ember Data 2.2.1. I created my REST API to follow JSON API spec v1.0, this is an example of a resource array retrieved with GET /articles

{
  "links" : {
    "self" : "http://localhost:8080/test-app/rest/articles"
  },
  "data" : [
    {
      "id" : "5666157634499515eb7e13f0",
      "type" : "articles",
      "attributes" : {
        "title" : "test"
      }
    },
    {
      "id" : "5666157634499515eb7e13f1",
      "type" : "articles",
      "attributes" : {
        "title" : "test2"
      }
    },
    ...
  ]
}

and my articles route looks like this:

// routes/articles.js
...
export default Ember.Route.extend({
  model() {
    return this.store.findAll('article');
  }
});

and the model:

// models/article.js
...
export default DS.Model.extend({
  title: DS.attr(),
  text: DS.attr(),
  url: DS.attr(),
  date: DS.attr()
});

I followed the tutorial (https://guides.emberjs.com/v2.2.0/tutorial/ember-data/) exactly. Yet when I open the view, I get a warning:

WARNING: Encountered "data" in payload, but no model was found for model name "datum" (resolved model name using test-app@serializer:-rest:.modelNameFromPayloadKey("data"))

and no data is rendered. I can see the data being requested and returned correctly, but it is interpreted in the wrong way somehow.

My question is: what is wrong? I tried to stick to the default API to not write any adapters or serializers, but it is not working.

--

UPDATE: I added the "links" section to the response object and now I get two warnings:

WARNING: Encountered "links" in payload, but no model was found for model name "link" (resolved model name using test-app@serializer:-rest:.modelNameFromPayloadKey("links"))
WARNING: Encountered "data" in payload, but no model was found for model name "datum" (resolved model name using test-app@serializer:-rest:.modelNameFromPayloadKey("data"))

--

UPDATE 2: So I got this to work by restructuring my API response to look like:

{
  "articles" : [ {
    "id" : "5666157634499515eb7e13f0",
    "attributes" : {
      "title" : "test"
    }
  }, {
    "id" : "5666141034499511aea5f43c",
    "attributes" : {
      "title" : "test"
    }
  },
  ...
}

renamed "data" to "articles" which is specific to the requested resource and to the request type (get one, get many)
removed "attributes" from the resource objects, all attributes are now directly included
removed all keys beside "articles" in the root object

I saw this here: ember data no model was found for attribute name I do not understand why this is working but the example at the ember tutorial is not. The tutorial is for ember 2.2.0 which is what I am using. I created my project through ember cli and then replaced the ember version 1.13 with 2.2.0.

--

Update 3: Fixed this. See my answer (I cannot accept it yet). Basically, I used the wrong REST adapter. ember-cli generates a default adapter using the RESTAdapter and this has to be changed to JSONAPIAdapter.

Eike Cochu Eike Cochu · Accepted Answer · 2015-12-17T02:28:16

The problem is that Ember uses the RESTAdapter per default. To use this response format with JSON API the JSONAPIAdapter has to be used. So in app/adapters/application.js:

export default DS.JSONAPIAdapter.extend({
    ...
});

and change the Content Type of each API response to application/vpn.api+json as described in the Spec.

Ember.js JSON API confusion

1 Answers