vendredi 12 avril 2019

How to display API response in Ember template?

I'm using Ember to retrieve a specific record from a REST API and display it on a template. I can console log the payload from my serializer and it displays the object correctly, but my template can't seem to access it.

The payload has the following structure:

{ 
  _id: 5cb0f8bd3b74cf22b75e1a37,
  name: 'Mu',
  hour: 0,
  day: 0,
  week: 0,
  month: 0,
  year: 753,
  size: 1,
  detail: 1,
  createdAt: 2019-04-12T20:44:45.691Z,
  updatedAt: 2019-04-12T20:44:45.691Z,
  __v: 0 
}

My ember route looks like this:

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

export default Route.extend({
  model() {
    this.get('store').find('world', '5cb0f8bd3b74cf22b75e1a37');
  },
})

My adapter looks like this:

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host: 'http://localhost:3000',
  pastForType(){
    return 'worlds';
  },
});

Here is my ember model for worlds:

import Model from 'ember-data/model';
import DS from 'ember-data';

const { attr } = DS;

export default Model.extend({
  name: attr('String'),
  hour: attr('Number'),
  day: attr('Number'),
  week: attr('Number'),
  month: attr('Number'),
  year: attr('Number'),
  size: attr('Number'),
  detail: attr('Number')
});

The payload is normalized by my serializer:

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
  primaryKey: '_id',

  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    payload = { worlds: payload };
    console.log(payload);
    return this._super(store, primaryModelClass, payload, id, requestType);
  }
});

When the route is called the console outputs this:

Object { worlds: {…} }

The data is correct inside the object, but when I try to access in my handlebars template nothing is displayed.

Am I failing to pass the object to the template somehow? Am I just referring to it incorrectly?




Aucun commentaire:

Enregistrer un commentaire