I've got two Models using ember-data:
App.Post = DS.Model.extend({
'comments': DS.hasMany('comment', {async: true})
});
App.Comment = DS.Model.extend({
postId: DS.belongsTo('post', {async: true})
});
When I try to get the Posts via a Route
model: function(params) {
return this.store.find('post', params.query);
}
Ember tries to find the Comments, which are not Part of the Posts Response from the API, although "async" is set to true.
Cannot read property 'comments' of undefined
Update
Some more detailed informations, complementing the information above:
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: 'http://api.example.com'
});
App.ApplicationController = Ember.Controller.extend({
actions: {
search: function() {
var term = this.get('query');
this.transitionToRoute('post', { query: term });
},
reset: function() {
clearTimeout(this.get("timeout"));
this.setProperties({
isProcessing: false,
isSlowConnection: false
});
}
}
});
App.Router.map(function() {
this.resource('post', { path:'/:query' }, function(){
this.route('create');
this.route('edit');
});
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('post', params.query);
}
});
Data
"posts": [
{
"id": 1,
"title": "Lorem ipsum",
"comments": ["1", "2"],
},
{
"id": 2,
"title": "dolor sit amet",
"comments": ["1", "2"],
}
]
And
"comments": [
{
"id": "1",
"body": "comment content 1",
"postId": 1
},
{
"id": "2",
"body": "comment content 2",
"postId": 1
}
]
If you wanna get information that is already loaded on the store you need to use
this.store.all('post')
And then use filter to get the information you want as an example
this.store.all('post').filterBy('key', value)
have a look at the documentation for further information on filtering if you need
http://emberjs.com/guides/enumerables/
As stated in a comment from ShinySides answer, Ember expects an object, instead of an array, because of the routing: if you got the route /posts the responded JSON has to be an Array with all posts:
"posts": [
{
"id": 1,
"title": "Lorem ipsum",
"comments": ["1", "2"],
},
]
But for the route /posts/search-for-whatever-in-posts Ember expects an object, representing just one post:
"post": {
"id": 1,
"title": "Lorem ipsum",
"comments": ["1", "2"],
},
The solution for my question: QUERYING FOR RECORDS:
var posts = this.store.find('posts', { term: "search for whatever in posts" });
which adds a parameter "term" to the API request (e.g. api.example.com/posts?term=whatever). Ember will now return an array.
Related
In my Ember app, a survey belongsTo a user; a user hasMany surveys. In my template, I would like to display a list of surveys, and the name of the user that created them. For now, I am pushing side-loaded data into the store via the application route, and it is showing up in the ember inspector->Data. The survey info is displaying correctly in the template, but the corresponding user's firstName will not appear. Help/guidance appreciated.
survey.js (model)
import DS from 'ember-data';
export default DS.Model.extend({
user: DS.belongsTo('user', {async: true}), //tried without async as well
title: DS.attr(),
post: DS.attr()
});
user.js (model)
import DS from 'ember-data';
export default DS.Model.extend({
surveys: DS.hasMany('survey', {async: true}),
firstName: DS.attr()
});
application.js (application route)
export default Ember.Route.extend({
model() {
this.store.push({
data: [{
id: 1,
type: 'survey',
attributes: {
title: 'My First Survey',
post: 'This is my Survey!'
},
relationships: {
user: 1
}
}, {
id: 2,
type: 'survey',
attributes: {
title: 'My Second Survey',
post: 'This is survey 2!'
},
relationships: {
user: 1
}
}, {
id: 1,
type: 'user',
attributes: {
firstName: 'Tyler'
},
relationships: {
surveys: [1, 2]
}
}]
});
}
});
surveys.js (route)
export default Ember.Route.extend({
model () {
return this.store.findAll('survey');
}
});
surveys.hbs (template)
<ul>
{{#each model as |survey|}}
<li>
<strong>{{survey.title}}</strong> //This works
<br>
{{survey.post}} //This works
<br>
Author: {{survey.user.firstName}} //This does not work
</li>
{{/each}}
</ul>
SOLUTION - updated application.js
export default Ember.Route.extend({
model() {
this.store.push({
"data": [ //Added double quotes throughout to conform to documentation
{
"id": "1",
"type": "survey",
"attributes": {
"title": "My First Survey",
"post": "This is my Survey!"
},
"relationships": {
"user": {
"data": {
"id": "1",
"type": "user"
}
}
}
}, {
"id": "2",
"type": "survey",
"attributes": {
"title": "My Second Survey",
"post": "This is survey 2!"
},
"relationships": {
"user": {
"data": {
"id": "1",
"type": "user"
}
}
}
}
],
"included": [
{
"id": "1",
"type": "user",
"attributes": {
"firstName": "Tyler"
} //no need to include user's relationships here
}
]
});
}
});
Payload relationship part is not correct. Should be:
relationships: {
user: {
data: {
id: 1,
type: 'user'
}
}
}
Also I think "user" payload should be in "included" section.
JSONAPISerializer api
I'm trying to get a list of items served from Django and Tastypie and display them using Ember.js. I've encountered the following problem:
EmberJS stores only the last value from JSON - so /api/post serves a few entries, but EmberJS stores and then displays only the last one(I also checked with the Ember extensions for Chrome). I'm not even sure where to look for a solution - is it Ember, Ember-data, Tastypie or all of them?
Here's the javascript code:
Blog.ApplicationAdapter = DS.DjangoTastypieAdapter.extend({
host: "http://127.0.0.1:8000",
namespace: "api/v1"
});
Blog.ApplicationSerializer = DS.DjangoTastypieSerializer.extend({});
/* Models */
Blog.Post = DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string'),
added: DS.attr('date'),
created: DS.attr('date')
});
/* Routes */
Blog.Router.map(function() {
this.route('post-list');
this.route('post', { path: 'post_id' });
});
Blog.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('post-list')
}
});
Blog.PostListRoute = Ember.Route.extend({
model: function() {
return this.store.find('post')
}
});
Here's the curl extract for reference:
{
"meta": {
"limit": 20,
"next": null,
"offset": 0,
"previous": null,
"total_count": 2
},
"objects": [
{
"added": "2014-12-23T19:49:28.881759",
"body": "hsdkfkjahsdkshufy \r\n\r\nLorem ipsum",
"created": "2014-12-23T19:49:28.881759",
"id": 2,
"resource_uri": "\/api\/v1\/post\/2",
"slug": "jklshfkjasfhkjkhlf",
"title": "jkl;shfkjasfhkjkhlf"
},
{
"added": "2014-12-23T23:00:23.719586",
"body": "sdhkjasgaskg slkhs;fas\r\n\r\nhsdkjhsask sfhjask \r\nhakjhagkl\r\n\r\nhgaskjhagskj \r\nhgkjash",
"created": "2014-12-23T23:00:23.719586",
"id": 3,
"resource_uri": "\/api\/v1\/post\/3",
"slug": "asfhklasdnhjasdkghskl",
"title": "asfhklasdnhjasdkghskl"
}
]
}
I recreated the project using latest Django version (from 1.6 to 1.7). It seems that the issue is solved now, no changes in the code were made.
I'm using ember-data:
// Version: v1.0.0-beta.3-2-ga01195b
// Last commit: a01195b (2013-10-01 19:41:06 -0700)
var App = Ember.Application.create();
App.Router.map(function() {
this.resource("main");
});
Using a namespace:
App.ApplicationAdapter = DS.RESTAdapter.extend({
namespace: 'api'
});
The Ember model:
App.Article = DS.Model.extend({
title: DS.attr('string'),
desc: DS.attr('string')
});
The route looks like this:
App.MainRoute = Ember.Route.extend({
model: function() {
console.log(this.store.find('article')); // isRejected: true, reason: Object has no method 'eachTransformedAttribute'
this.store.find('article').then(function(results){console.log(results)}); //nothing
}
});
Here is the data:
{
"articles": [{
"_id": "5266057ee074693175000001",
"__v": 0,
"createdAt": "2013-10-22T04:56:30.631Z",
"desc": "testing, testing",
"title": "Basic",
"id": "5266057ee074693175000001"
}, {
"_id": "5266057ee074693175000002",
"__v": 0,
"createdAt": "2013-10-22T04:56:30.636Z",
"desc": "testing, testing",
"title": "Basic2",
"id": "5266057ee074693175000002"
}, {
"_id": "5266057ee074693175000003",
"__v": 0,
"createdAt": "2013-10-22T04:56:30.636Z",
"desc": "testing, testing",
"title": "Basic3",
"id": "5266057ee074693175000003"
}, {
"_id": "5266057ee074693175000004",
"__v": 0,
"createdAt": "2013-10-22T04:56:30.636Z",
"desc": "testing, testing",
"title": "Basic4",
"id": "5266057ee074693175000004"
}]
}
I am using ember-tools to manage the project build.
The issue is with ember-tools default build placing the Model definition after the Route.
UPDATED: This is because I manually created the Article model without using a generator. (I've since used the generator and the order is created correctly)
I've fixed it by manually updated the built: application.js from this:
App.MainRoute = Ember.Route.extend({
model: function() {
return this.store.find('document');
}
});
App.Article = DS.Model.extend({
title: DS.attr('string'),
file: DS.attr('string')
});
to this:
App.Article = DS.Model.extend({
title: DS.attr('string'),
file: DS.attr('string')
});
App.MainRoute = Ember.Route.extend({
model: function() {
return this.store.find('document');
}
});
I resolved this by inspecting a working app, and found that within the JSONSerializer applyTransforms() type was referencing a different type:
It should be the namespace model Class like this:
I'm getting this error when trying to load a set of records through a restful api. It works with ember-model but when I switch to ember-data (beta 2) and ember.js (1.0), I get this error.
Assertion failed: No model was found for '0'
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: 'http://localhost:8080',
namespace: 'api'
});
App.Router.map(function() {
this.resource('about');
this.resource('pages', function() {
this.resource('page', { path: ':page_id' });
});
this.resource('login');
});
App.AuthenticatedRoute = Ember.Route.extend({
actions: {
error: function(reason, transition) {
if (reason.status == 403) {
alert('You must login');
this.transitionTo('login');
}
else {
//alert('non 403 error:'+reason.status);
this.transitionTo('login');
}
}
}
});
App.PagesRoute = Ember.Route.extend({
model: function() {
return this.store.find('page');
}
});
App.PageRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('page', params.page_id);
}
});
App.Page = DS.Model.extend({
user: DS.attr('string'),
slug: DS.attr('string'),
zcontent: DS.attr(),
title: DS.attr('string'),
create_time: DS.attr('date'),
update_time: DS.attr('date')
});
Here is what the backend returned:
{
"pages": [
{
"update_time": "2013-01-14 19:59:35.744855",
"title": "",
"id": 38,
"create_time": "2012-08-04 15:08:16",
"user": "robert-jones",
"slug": "orange"
},
{
"update_time": "2013-01-14 19:59:35.899830",
"title": "",
"id": 47,
"create_time": "2012-08-03 10:04:07",
"user": "robert-jones",
"slug": "REVIEWStheraputics"
},
{
"update_time": "2012-12-18 07:16:13.656509",
"title": "'Notes on Temperature Heat Map'",
"id": 17,
"create_time": "2012-12-18 07:14:48.118119",
"user": "robert-jones",
"slug": "50612c27b94ca650"
},
{
"update_time": "2012-12-12 19:48:08.079021",
"title": "'Notes on Dyanmic Heat Map'",
"id": 8,
"create_time": "2012-12-12 19:48:08.013336",
"user": "robert-jones",
"slug": "c5642b4c14d901cf"
}
]
}
I've run into this before when my server was just returning a raw array instead of an object with a root element. That is, instead of this:
{pages : [...]}
I was accidentally returning this:
[...]
Kind of hard to say without a JSBin to look at.
I'm trying to parse a json dataset in my ember data models but this throws an error in het console:
Uncaught TypeError: Cannot call method '_create' of undefined
DS.Store.Ember.Object.extend.materializeRecord
DS.Store.Ember.Object.extend.findByClientId
What am I doing wrong here?
This is the data I receive from the server:
{
"newsitems": [
{
"date": "2013-02-10T15:00:00+01:00",
"id": "1",
"images": [
{
"id": "1",
"value": "image.JPG"
},
{
"id": "3",
"value": "anotherimage.jpg"
}
],
"slug": "some-slug",
"summary": "some summary",
"text": "some text",
"thumb": {
"id": "2",
"value": "someimage.JPG"
},
"title": "Some title",
"type": "1",
"videos": [
{
"id": "AEOpX8tmiUI",
"value": "AEOpX8tmiUI"
},
{
"id": "kxopViU98Xo",
"value": "kxopViU98Xo"
}
]
}
]
}
These are my models:
App.NewsitemThumb = DS.Model.extend({
value: DS.attr('string'),
newsitem: DS.belongsTo('App.Newsitem')
});
App.NewsitemImage = DS.Model.extend({
value: DS.attr('string'),
newsitem: DS.belongsTo('App.Newsitem')
});
App.NewsitemVideo = DS.Model.extend({
value: DS.attr('string'),
newsitem: DS.belongsTo('App.Newsitem')
});
App.Newsitem = DS.Model.extend({
slug: DS.attr('string'),
type: DS.attr('string'),
title: DS.attr('string'),
summary: DS.attr('string'),
text: DS.attr('string'),
date: DS.attr('date'),
thumb: DS.belongsTo('App.NewsitemThumb'),
images: DS.hasMany('App.NewsitemImage'),
videos: DS.hasMany('App.NewsitemVideo')
});
For the record, any suggestions for optimizing these models are welcome. It feels so weird to make 3 models for video, images and a thumb.
According to this issue, this error pops up when you don't specify an explicit mapping for a hasMany relationship in your adapter.
Try defining your store as
App.Store = DS.Store.extend({
revision: 11,
adapter: DS.RESTAdapter.extend({
serializer: DS.RESTSerializer.extend({
init: function() {
this._super();
this.map("App.Newsitem", {
images: { embedded: "load" },
videos: { embedded: "load" }
});
}
})
})
});