Getting Emberjs data from an Express Api

Question

I built an express api connected to an ember app following this guide. I verified that my api routes are working correctly with postman. The issue arises when I try to call a GET from ember.

MEENApp/app/routes/routes.js

    router.get('/blogposts',(req, res) => {
console.log("API GET REQUEST");
BlogPostSchema.find({}, (err,blogpost) => {
    if(err) {
        res.send(err);
    }
    console.log(blogpost);
    res.json(blogpost);
})});

When being called from the ember app the console.log(blogposts) outputs the correct information to the console

    [ { _id: 5c588e1bc23c5e5620c59b4e,
    title: 'Helloooo',
    body: 'teeest',
    datePosted: 2019-02-04T19:10:19.422Z,
    __v: 0 },
  { _id: 5c589c1f773a76461cf1e4be,
    title: 'titletest',
    body: 'bodytest',
    datePosted: 2019-02-04T20:10:07.790Z,
    __v: 0 },
  { _id: 5c58becee53d4925a88c20fb,
    title: 'titletest2',
    body: 'titletest2',
    datePosted: 2019-02-04T22:38:06.660Z,
    __v: 0 },
  { _id: 5c58cf647d0a52086c5aac5d,
    body: 'rere',
    title: 'rerere',
    datePosted: 2019-02-04T23:48:52.477Z,
    __v: 0 } ]

Ember however does not show this data once called.

MEENAPP/EmberApp/App/routes/Index.js

import Route from '@ember/routing/route';

export default Route.extend({
  model() {

    var code = this.store.findAll('blogpost');
    console.log(code);
    return this.store.findAll('blogpost');
  }
});

Console in chrome shows

{isFulfilled: false, isRejected: false, _objectsDirtyIndex: 0, _objects: null, _lengthDirty: true, …}

But it works if I were to manually enter the data into ember that the api gave me like

MEENAPP/EmberApp/App/routes/Index.js

import Route from '@ember/routing/route';

    let blogposts = [
      {
        "_id": "5c588e1bc23c5e5620c59b4e",
        "title": "Helloooo",
        "body": "teeest",
        "datePosted": "2019-02-04T19:10:19.422Z",
        "__v": 0
      },
      {
        "_id": "5c589c1f773a76461cf1e4be",
        "title": "titletest",
        "body": "bodytest",
        "datePosted": "2019-02-04T20:10:07.790Z",
        "__v": 0
      },
      {
        "_id": "5c58becee53d4925a88c20fb",
        "title": "titletest2",
        "body": "titletest2",
        "datePosted": "2019-02-04T22:38:06.660Z",
        "__v": 0
      },
      {
        "_id": "5c58cf647d0a52086c5aac5d",
        "body": "rere",
        "title": "rerere",
        "datePosted": "2019-02-04T23:48:52.477Z",
        "__v": 0
      }
    ];


    export default Route.extend({
      model() {
        return blogposts;
      }
    });

The way I'm displaying this is through a view-post component that shows a post and I loop through the model in the index page to display the posts.

MEENAPP/EmberApp/App/models/blogpost.js

import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string'),
  body: DS.attr('string')
});

MEENAPP/EmberApp/App/Components/view-post/template.hbs

  <p>{{blogpost.title}} - {{blogpost.body}}</p>

MEENAPP/EmberApp/App/templates/index.hbs

{{#each model as |blogpost|}}
  {{view-post blogpost=blogpost}}
{{/each}}

I'm confused on which part is incorrect. As far as I can see the API works and ember correctly made the call to it.

your JSON response is not JSON:API compliant. What adaper are you using? — Lux

Enno Enno · Accepted Answer · 2019-02-06T17:18:02

Per default, ember-data expects data payloads from the backend to be in JSON:API format. As @Lux mentioned, your payload isn't JSON:API compliant, therefore the findAll returns an empty array.

You can either tell ember-data about your custom data format by customizing Serializers or you change your backend to send JSON:API compliant data.

There are a lot of libraries supporting JSON:API. You could for example use jsonapi-serializer in your current express server, to serialize your payloads for ember-data (There even is an express server example).

Getting Emberjs data from an Express Api

1 Answers