Ember data - content object doesn't show any data

Ember Data
1

Hey,

i have the problem that i cannot access my model data

./app/adapters/blogpost.js: import DS from ‘ember-data’;

export default DS.RESTAdapter.extend({
	host: "http://localhost:1337",
	namespace: "Blogposts",
	pathForType(modelName) {
		return "";
	}
});

./app/models/blogpost.js import DS from ‘ember-data’; const { Model } = DS;

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

./app/components/blogpost.js import Component from ‘@ember/component’; import Ember from ‘ember’;

export default Component.extend({
	blogposts:  Ember.inject.service('blogpost'),
});

./app/services/blogpost.js

import Service from '@ember/service';
import Ember from 'ember';
let data = {
	id : 0,
	headline : "headline 1",
	postText: "post first text"
}

export default Service.extend({
	blogposts: null,
	store: Ember.inject.service('store'),
	init() {
		console.log('*********')
		this.set('blogposts', this.store.findAll('blogpost'))
		//this.set('blogposts',data)
	}
});

./app/serializers/blogpost.js import DS from ‘ember-data’;

export default DS.RESTSerializer.extend({
	normalizeResponse(store, primaryModelClass, payload, id, requestType){
		let tmpPayload = {
			blogposts: payload
		}

		console.log('----------------------!',tmpPayload)

		return this._super(store, primaryModelClass, tmpPayload, id, requestType);
		//return tmpPaylod
	}
});

./app/templates/bogpost.hbs

blogposts
{{log this}}

{{log blogposts.blogposts}}


{{#each blogposts.blogposts.content.content as |post|}}
	{{post.blogposts.id}} <br />
	{{post.headline}}<br />
	{{post.post}} <br />
{{/each}}
{{yield}}

For some reason i cannot access the data in the template, but if i check in the console of the browser. there are only objects in the content field. No actual data. See in the picture

firefox_console
firefox_console669×561 89.2 KB

The data itself is accessable in the serializer

2

I was following along till blogposts.blogposts.content.content At that point the code has veered so far off the rails I don’t know how to get it back on track.

I’m not entirely sure why it is exposing a Proxy to a Proxy of a Promise through a Service. I think the problems your facing lay in the design. In this case I would rely on Ember’s promise resolution in a route’s model hook (allowing use of their loading substates) or in the case of a component use the Proxy’s isPending state to show a loading spinner. This way I never have to tap into content.

If you must run this through a service then I would delay setting blogposts till after it has resolved:

this.store.findAll('blogpost')
  .then(blogposts => this.set('blogposts', blogposts))
  .catch(error => this.set('error', error);

By directly setting blogposts to a promise proxy you have to treat it as such in all uses of it. Diving into content is admission of not understanding this core concept. content is designed to be private in that it is what the proxy proxies. Direct access means your side stepping the proxy and you take on all the responsibility of edge cases yourself instead of relying on the proxy to do its job.

Based on the style of code I am presuming you are not using Ember > 3.4 but if you were you could simplify most async code with the async/await.

async fetchAndSetBlogPosts() {
  this.set('loading', true);
  try {
    let blogposts = await this.store.findAll('blogpost');
    this.set('blogposts', blogposts);
  } catch(error) {
    this.set('error', error);
  } finally {
    this.set('loading', false);
  }
}

Or use ember-concurrency which would fix about 99% of all problems with async.

In any case I hope offering an understanding to the objects in use and the roles they play can help bring some light to the complications your running into. Good luck.