Получение данных Emberjs из Express Api - PullRequest
Новая
       9

Получение данных Emberjs из Express Api

0 голосов
/ 05 февраля 2019

Я создал Express API, подключенный к приложению ember, следуя этому руководству .Я проверил, что мои маршруты API работают правильно с почтальоном.Проблема возникает, когда я пытаюсь вызвать GET из Ember.

MEENApp / app / routs / rout.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);
})});

При вызове из приложения ember console.log (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 } ]

Ember, однако, не показывает эти данные после вызова.

MEENAPP / EmberApp / App / маршруты / 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');
  }
});

Консоль в Chrome показывает 

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

Но это работает, если бы я вручную вводил данные в ember, которые мне дал API, например

MEENAPP / EmberApp / App / маршруты / 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;
      }
    });

СпособЯ показываю это через компонент просмотра поста, который показывает пост, и я перебираю модель на странице индекса для отображения постов.

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}}

Я запутался, какая часть неверна.Насколько я вижу, API работает, и Ember правильно сделал вызов.

1 Ответ

0 голосов
/ 06 февраля 2019

По умолчанию ember-data ожидает, что данных из бэкэнда будут в формате JSON: API .Как упоминалось в @Lux, ваша полезная нагрузка не совместима с JSON: API, поэтому findAll возвращает пустой массив.

Вы можете сообщить ember-данным о вашем пользовательском формате данных, настроив Serializer или вы измените свой бэкэнд для отправки данных, соответствующих JSON: API.

Существует множество библиотек , поддерживающих JSON: API .Например, вы можете использовать jsonapi-serializer на вашем текущем экспресс-сервере для сериализации ваших полезных данных для ember-данных (даже есть пример экспресс-сервер ).

...