emberjs 2 connect to an api flask - Encountered a resource object with an undefined type

Question

I'm learning Ember and after some basic test, I tried to connect with my API to created a search component.

API 'application/vnd.api+json'

{
  "data": [
    {
      "expediente": "1717801",
      "fecha_de_presentacion": "01/02/2016 12:00:00 AM",
      "figura_juridica": "REGISTRO DE MARCA",
      "logotipo": null,
      "signo": "IGUY",
      "tipo": "NOMINATIVA",
      "titular": "SAMSONITE IP HOLDINGS S.\u00c0.R.L."
    },
    {
      "expediente": "1717793",
      "fecha_de_presentacion": "01/02/2016 12:00:00 AM",
      "figura_juridica": "REGISTRO DE MARCA",
      "logotipo": "1_files/direct_151.gif",
      "signo": "URGOSTART",
      "tipo": "MIXTA",
      "titular": "HCP HEALTHCARE ASIA PTE. LTD"
    },
    {
      "expediente": "1717780",
      "fecha_de_presentacion": "02/02/2016 12:00:00 AM",
      "figura_juridica": "REGISTRO DE MARCA",
      "logotipo": null,
      "signo": "SKALAR",
      "tipo": "NOMINATIVA",
      "titular": "SKALAR HOLDING B.V."
    },
    {
      "expediente": "1717811",
      "fecha_de_presentacion": "02/02/2016 12:00:00 AM",
      "figura_juridica": "REGISTRO DE MARCA",
      "logotipo": "1_files/direct_189.gif",
      "signo": "MELI MELO",
      "tipo": "MIXTA",
      "titular": "MELI\u00b4MELO\u00b4 LIMITED"
    }
]
}

app/templates/index.hbs

{{input value=search}}

<ul>
  {{#each model as |trademark|}}
    <li>{{trademark.signo}}</li>
  {{/each}}
</ul>

app/controller/index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['search'],
  search: ""
});

app/models/trademarks.js

import DS from 'ember-data';
export default DS.Model.extend({
  figura_juridica: DS.attr('string'),
  expediente: DS.attr('string'),
  titular: DS.attr('string'),
  signo: DS.attr('string'),
  tipo: DS.attr('string'),
  fecha_de_presentacion: DS.attr('date'),
  logotipo: DS.attr('string')
});

app/route.js

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

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

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

export default Router;

app/adapters/application.js

import DS from 'ember-data';

  export default DS.JSONAPIAdapter.extend({
  host: 'http://localhost:5000',
  namespace: 'v1'
});

if I extends from JSONAPIAdapter i got this error:

Error while processing route: index Assertion Failed: Encountered a resource object with an undefined type (resolved resource using ui@serializer:-json-api:)

I changed to extended my adapter from JSONAPISerializer but only got another error.

import DS from 'ember-data';

  export default DS.JSONAPISerializer.extend({
  host: 'http://localhost:5000',
  namespace: 'v1'
});

Error while processing route: index Assertion Failed: You tried to load a query but your adapter does not implement query EmberError@http://localhost:4200/assets/vendor.js:26674:1

Answer 1

Option 1 - Using JSONAPIAdapter

Out of the box Ember.js expects responses from server in JSONApi standard. You can see this standard here: http://jsonapi.org/

When you use JSONAPIAdapter, your server response should look like this:

{
  "data": [
    {
      "type": "trademarks",
      "id": "1",
      "attributes": {
        "expediente": "1717801",
        "fecha_de_presentacion": "01/02/2016 12:00:00 AM",
        "figura_juridica": "REGISTRO DE MARCA",
        "logotipo": null,
        "signo": "IGUY",
        "tipo": "NOMINATIVA",
        "titular": "SAMSONITE IP HOLDINGS S.\u00c0.R.L."
      }
    },
    {
     "type": "trademarks",
      "id": "2",
      "attributes": {
        "expediente": "1717793",
        "fecha_de_presentacion": "01/02/2016 12:00:00 AM",
        "figura_juridica": "REGISTRO DE MARCA",
        "logotipo": "1_files/direct_151.gif",
        "signo": "URGOSTART",
        "tipo": "MIXTA",
        "titular": "HCP HEALTHCARE ASIA PTE. LTD"
      }
    },
    .
    . rest of the data
    .
    ]
}

You can use a few external package which helps generate jsonAPI standard payload from flask: https://github.com/vertical-knowledge/ripozo/, https://github.com/benediktschmitt/py-jsonapi, https://github.com/xamoom/xamoom-janus

Option 2 - Using RESTAdapter

http://emberjs.com/api/data/classes/DS.RESTAdapter.html

You can change your adapter with rewriting export default DS.JSONAPIAdapter.extend to export default DS.RESTAdapter.extend in /app/adapters/application.js.

In this case, your server payload should look like this:

{
  "trademarks": [
    {
      "id": "1"
      "expediente": "1717801",
      "fecha_de_presentacion": "01/02/2016 12:00:00 AM",
      "figura_juridica": "REGISTRO DE MARCA",
      "logotipo": null,
      "signo": "IGUY",
      "tipo": "NOMINATIVA",
      "titular": "SAMSONITE IP HOLDINGS S.\u00c0.R.L."
    },
    {
      "id": "2"
      "expediente": "1717793",
      "fecha_de_presentacion": "01/02/2016 12:00:00 AM",
      "figura_juridica": "REGISTRO DE MARCA",
      "logotipo": "1_files/direct_151.gif",
      "signo": "URGOSTART",
      "tipo": "MIXTA",
      "titular": "HCP HEALTHCARE ASIA PTE. LTD"
    },
    .
    .
    .
    ]
}

If you are learning Ember.js, I wrote a free tutorial about the latest Ember, maybe it could help also: Ember.js tutorial