I have ember action in controller:
actions: {
createRecord: function(){
var record = this.store.createRecord('record',{});
record.save().then(function(response){
console.log(response);
});
}
In promise (after saving) I receive message in format like this:
{
"content": "Error/success",
"detail": "Detail"
}
It's look like ember data make auto-bind and crash with message:
Error: No model was found for 'content'
How I can fix this, I don't need model for response
Firstly this isn't following rest standards, there are response codes that define success/failure. In your case, you are responding in a fashion that is telling ember data, hey, everything went a okay, and here's some data that should be loaded into the store.
If you have no control over the endpoint, then you'll need to create a custom serializer, and override the appropriate method (probably this one http://emberjs.com/api/data/classes/DS.JSONSerializer.html#method_extractSave ), and rip out the erroneous json before handing it to ember data.
Related
Ok, so I'm new to Ember so bear with me.
I have an Ember application that is communicating with an API that does not adhere to JSONAPI standards, thus I have begun writing my own serializers in order to use Ember Data. However I am finding that when I make multiple requests to the same resource, the data is having trouble writing to the store. Consecutive requests to the same resource always responds with the following error:
TypeError: Cannot convert object to primitive value
Which from my limited understanding, implies that the data I am sending to the store is being treated like a string.
In my Application route I have written a findAll to my model 'listing-item' like so:
model: function() {
return this.store.findAll('listing-item');
},
In a nested 'user' route, when I do any type of request for the listing-item data that returns an array response (query, findAll) for the listing-item data, I get:
TypeError: Cannot convert object to primitive value
at EmptyObject.SETTER_FUNCTION [as title] (ember.debug.js:20672)
at assign (<anonymous>)
at InternalModel.setupData (internal-model.js:244)
at Class._load (store.js:1728)
at Class._pushInternalModel (store.js:2055)
at Class._push (store.js:1995)
at finders.js:141
at Backburner.run (ember.debug.js:720)
at Class._adapterRun (store.js:2253)
at finders.js:139
(Title is a field in my listing item model).
As I mentioned earlier, my API does not adhere to JSONAPI standards, so I've written a listing-item serializer like so:
import DS from 'ember-data';
export default DS.RESTSerializer.extend({
normalizeArrayResponse(store, primaryModelClass, payload) {
payload.data = [];
payload.listing_item._data.forEach(this.formatListingItemArray, payload.data);
delete payload.listing_item;
return payload;
},
formatListingItemArray(listingItem) {
this.push({
type: "listing-item",
id: listingItem.id,
attributes: {
title: listingItem.title,
description: listingItem.description,
buy_now_price: listingItem.buy_now_price,
created_at: listingItem.created_at,
category_id: listingItem.category_id,
subcategory_id: listingItem.subcategory_id,
identity_id: listingItem.identity_id,
listing_number: listingItem.listing_number,
brand_new: listingItem.brand_new,
sold: listingItem.sold,
},
});
},
});
So I suppose my question is, what is Ember Data doing with my data object for this error to occur, and what might I be doing wrong in formatting my data for Ember data to consume.
UPDATES:
It appears as though only the top 3 fields are causing this error to occur. If I comment out the attributes 'title', 'description' and 'buy_now_price' in my serializer, I don't get this error. Also, it appears this only occurs when I navigate to the route, If I am in the /user route when the application loads, both requests work as expected.
Ok, so I've been crawling through ember-data code and found that in the internal-model.js file there is a setup function that looks at the current attributes in the store and compares them to the data being passed from the serializer. It then does an assign() to copy the serializers new data over to the stores object. However for some reason it seems that my stores object has a set of 'getter' and 'setter' function that come back from the store for the problematic fields (title, description and buy_now_price). What I need to know now is why are these functions coming along for the ride and what have I done to cause this?
Picture of getters/setters on ember-data object
Thanks in advance, let me know if there's any more information I need to provide in order to give better context.
So I found the solution to my problem for anyone that experiences a similar issue.
The symptom was as stated above, it seemed as though ember-data was returning getter and setter functions back from the store and having problems placing my new values in their stead. However the clue was that it was only the fields that I was rendering in my template.
The problem seems to be that I was using an Ember Concurrency task to perform the loading of my data, then passing the task straight in to an internal component from the model template. Something like this (not tested code):
The WRONG pattern (one I was using to experience the issue).
//route file - application.js
export default Ember.Route.extend({
model: function() {
return {
listings: this.get('getListings').perform(),
};
},
getListings: task(function * () {
return yield this.store.findAll('listing-item');
}),
})
//application template - application.hbs
{{listing-index listings=model.listings}}
//listing index component template.hbs
{{#if listings.value}}
{{#each listings.value.content as |listing|}}
{{listing._data.title}}
{{listing._data.description}}
{{listing._data.buy_now_price}}
{{/each}}
{{/if}}
The CORRECT pattern seems to be as thus:
//route file - application.js
export default Ember.Route.extend({
model: function() {
return {
listings: this.get('getListings').perform(),
};
},
getListings: task(function * () {
return yield this.store.findAll('listing-item');
}),
})
//application template - application.hbs
{{#if listings.value}}
{{listing-index listings=model.listings.value}}
{{/if}}
//listing index component template.hbs
{{#each listings as |listing|}}
{{listing.title}}
{{listing.description}}
{{listing.buy_now_price}}
{{/each}}
So the problem seems to lie in this pattern of passing the task rather than the content of the task in to my component. When I looped over the listings in the model template then passed the listings straight in to the component, it seemed to have solved my issues. I gather this is something to do with the use of these _data properties. A further explanation would be appreciated but i'll mark this as resolved for now.
I have a backend that follows the JSON API specification.
In my Ember app, I do something like this:
model() {
return this.store.query('category', { filter: { forum: 'main' } });
}
This works well and the request sent to the server is GET /categories?filter[forum]=main. My app gets all the categories from the forum with ID main.
Now, instead of the previous request, I would like to make a GET /forums/main/categories from the model. How can this be done in Ember with Ember Data?
Here's something I tried with Ember AJAX:
ajax: Ember.inject.service(),
model() {
return Ember.RSVP.hash({
categories: this.get('ajax').request('/forums/main/categories'),
});
}
The request works and the correct data is returned from the server. But Ember Data just doesn't know about it and I can't use the model in my template. How can I make Ember AJAX work with Ember Data?
The Ember AJAX GitHub page proposes to write something like that:
import DS from 'ember-data';
import AjaxServiceSupport from 'ember-ajax/mixins/ajax-support';
export default DS.JSONAPIAdapter.extend(AjaxServiceSupport);
https://github.com/ember-cli/ember-ajax#usage-with-ember-data
But it doesn't seem to change anything.
Okay, /forums/main/categories looks a bit like a relationship link. Like forum is a model as well, and has a relationship categories. Is this right?
If yes, probably the best thing is to first fetch the forum and then the relationship. Maybe you already have the forum record? So something like this:
store.findRecord('forum', 'main').then(forum => forum.get('categories'));
However if you want to filter the categories based on a forum string, this is also possible. So basically you want to do this:
this.store.query('category', { filter: { forum: 'main' } });
But it should request /forums/main/categories instead of /categories?filter[forum]=main. This can be done with a custom adapter. Probably you just have to override urlForQuery:
urlForQuery(query, modelName) {
if(query.filter.forum)
const forum = query.filter.forum;
delete query.filter.forum;
return `/forums/${forum}/categories`
} else {
return this._super(...arguments);
}
},
So let's say you have a User model which is set up to a fairly standard API. On the front end you have an Ember project which also has that User model. The normal creation call would be something like the following:
store.createRecord('user', {email: 'test#gmail.com'}).save();
This would send off a POST request to something like /api/users. However, something fairly extensive API's support is the creation of multiple models at once. So for instance, instead of the POST call just sending a single object under user: {email: 'test#gmail.com'} it would send an array of objects like users: [{email: 'test#gmail.com'}, {email: 'test2#gmail.com'}, ...].
How I have seen this handled in ember is to just do multiple creation calls at runtime. However, this is terribly inefficient and I am wondering if Ember supports saving multiple models at the same time? How would you achieve this in Ember?
You cannot save an array of models in a single POST request Ember Data as you describe it, however there is a way.
You can save a parent model which hasMany 'user' with the EmbeddedRecordsMixin, which will include either relationship ids or full records. Your serializer would look like -
import DS from 'ember-data';
export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
attrs: {
users: { embedded: 'always' },
}
});
Depending on your use case it may make sense to create a parent model only for this purpose which hasMany 'user'. If you want to use an existing model and don't always want to embed its user records there is an answer here.
If you do decide to save the models individually, you would want to do users.invoke('save'), which will trigger a POST for each model.
If you're asking specifically about Ember Data, I don't know of any way of doing that (I don't think it's possible to use any equivalent of save() on a collection/array). There could be alternative Data libraries that may work (for instance you could check Orbit.JS - which is something I haven't done yet)
The way I've done it it to have a custom endpoint on my backend that receives a certain JSON payload and creates the resources. You do it by issuing a regular ajax call, see this example (from a project of mine).
let content = //get content that you want to post
let accessToken = this.get('session.session.authenticated.token');
Ember.$.ajax({
data: JSON.stringify(content),
dataType: 'json',
method: 'POST',
url: 'path/to/my/custom/end/point',
headers: {
'Content-Type': 'application/json',
'Authorization': `Beader ${accessToken}`
}
}).then((result) => {
// Code for success
}, (jqXHR) => {
// Code for error
}).always(() => {
// Code for always/finally
});
As you can see this is all custom code, not leveraging Ember Data store or models. So far I haven't found a better answer.
EDIT: After seeing andorov's answer. I forgot to mention something. I'm using Ember Data 2.0 (JSONAPI by default) and EmbeddedRecordsMixin does not work property with JSON API
Ember : 1.13.3
Ember Data : 1.13.5
jQuery : 1.11.3
I am trying to send a JSON payload using ember-data from my EmberJS client to my server. I want to send the entire object graph to the server on saving the project, as I don't want to send multiple requests. I wouldn't mind sending multiple requests, but I am worried about what happens if one of the requests fails in the middle and the data on the server will not be correct.
I wanted to use JSONAPI (http://jsonapi.org/format/#document-compound-documents) as that is becoming the default adapter in Ember. Also, there is a few C# libraries that handle this format, so I thought it would be quite straightforward. However, after reading the spec, it seems that I cannot embed objects if they do not have an id. EmberJS also does not attach the child objects to the JSON either even though I have specified { async: false, embedded: 'always' }) on the DS.attr.
My question is: If an application is used in such a way that an object graph is created on the client side, how do you use JSONAPI format to send the entire object graph to the server? Do I have to generate ids on the client side to satisfy the JSONAPI standard? Then once they get to the server just ignore them so they get saved with an id generated by the ORM?
Here is my labelGroup model:
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
labels: DS.hasMany('label-model', { async: false, embedded: 'always' })
});
Here is my project model:
import DS from 'ember-data';
export default DS.Model.extend(DS.EmbeddedRecordsMixin, {
name: DS.attr('string'),
labelGroups: DS.hasMany('labelGroup', { async: false, embedded: 'always'})
});
Here is the POST that I get after doing a save() on the project:
{
"data":{
"attributes":{"name":"Project"},
"relationships":{
"label-groups":{
"data":[
{"type":"label-groups","id":null},
{"type":"label-groups","id":null},
{"type":"label-groups","id":null},
{"type":"label-groups","id":null},
{"type":"label-groups","id":null},
{"type":"label-groups","id":null},
{"type":"label-groups","id":null}
]
}
},
"type":"label-projects"
}
}
UPDATE: I tried using https://www.npmjs.com/package/ember-cli-uuid to generate client side ids which it has. However the data getting output does not include the extra objects, only a reference to their ids. I expected to see an "included" property as specified here:http://jsonapi.org/format/#document-compound-documents, but it is not there.
{
"data":{
"id":"7b4544ee-91cd-493d-8b10-52040e68c283",
"attributes":{"name":"Project"},
"relationships":{
"label-groups":{
"data":[
{"type":"label-groups","id":"08115273-e82a-4d46-93ea-232ce071fb78"},
{"type":"label-groups","id":"9ca94fe9-8077-411e-98d2-1694c6fecce4"},
{"type":"label-groups","id":"d629f1e8-7962-404d-8034-38229ab21f77"},
{"type":"label-groups","id":"c6bda655-5489-4760-847b-bf02239bb2c5"},
{"type":"label-groups","id":"f6fef249-2d1d-43f0-ba64-24b7ff8b5637"},
{"type":"label-groups","id":"a7db25bf-52c8-477b-83e4-64e7c76b072e"},
{"type":"label-groups","id":"f3b5fbb3-261a-4b3d-b481-b9352f8ce2d6"}
]
}
},
"type":"label-projects"
}
}
Ember-data has no support for what you want at the moment. So ember-data will not save your relationships data in a save payload.
But its possible to do this your own by using a custom adapter and serializer.
I strongly recommend you to checkout the API and then look into the source.
If you call .save() on your Model the createRecord method is called on your adapter.
Here serializeIntoHash on the serializer is called to serialize the Model.
serializeIntoHash calls serialize, where serializeBelongsTo and serializeHasMany is called.
Now you can just override serializeHasMany and modify the hasMany before the line:
json[payloadKey] = hasMany;
Here you have the type and the ids as they are sent by ember-data. You could just .forEach the data on the hasMany and then fetch the store for the data and build your included array.
I hope this helps you to understand the serializer and the adapter so you can modify it to do whatever you want pretty easy. Actually this is the best part about ember-data. The structure of the adapter and the serializer, which allows easy modifications.
This is very similar to this question Force reload of dirty/invalid model in Ember
I'm using ember.js with ember-data.
DEBUG: ------------------------------- ember.js?compile=false:3521
DEBUG: Ember : 1.5.0 ember.js?compile=false:3521
DEBUG: Ember Data : 1.0.0-beta.7+canary.e3b896bc ember.js?compile=false:3521
DEBUG: Handlebars : 1.3.0 ember.js?compile=false:3521
DEBUG: jQuery : 1.11.0 ember.js?compile=false:3521
DEBUG: -------------------------------
The server returns a 422 with errors response for validation errors, which gets added to model's errors and marked as invalid, then the error shows up on my template. This all works fine. However,
after the model is marked invalid following an attempted save(), if I then linkTo another route let's say to /show/id to view that same model. The data store retrieves the invalid model with invalid values instead of getting a fresh valid model. I have tried doing a rollback() onFail like: group.save().then(onSuccess, onFail); and the rollback works, however it also clears the model errors and refreshes the template so the user never sees the validation errors. What I want is to show the validation errors and if a linkTo another route happens; From there the model with invalid state, should no longer be pulled from the data store, but rather pulled from the server again. The only way I can get a valid model currently is to reload the entire page.
I have also tried forcing a reload using the model hook in the router, but this seems to cause errors:
Ricauth.GroupShowRoute = Ember.Route.extend({
model: function(params) {
var group = this.store.find('group', params.id);
group.reload(); // doesn't work, causes error
return group;
},
setupController: function(controller, group) {
controller.set('model', group);
controller.set('readOnly', true);
controller.set('meta', Ember.copy(this.store.metadataFor("group")))
}
});
This is not really a good way to do it anyway, since I'm essentially reloading the model every time ShowRoute is requested. I also tried to check group.isValid, however it's undefined at that point. Any ideas on how to get this reloaded and only when the model is invalid?
I found a reasonable solution to this using onFail and unloadRecord(). unloadRecord will remove the record from the datastore so the store will then retrieve from the server next time this record is queried. My update action
actions: {
update: function (group) {
var self = this;
var onSuccess = function(group) {
console.info("save: "+group);
self.transitionTo('group.show', group);
};
var onFail = function(error) {
console.info("failed: "+error.message);
group.unloadRecord();
};
if(group.get('currentState').stateName == 'root.loaded.updated.uncommitted') {
group.save().then(onSuccess, onFail);
}
else {
onSuccess(group);
}
}
}
So while the unload does remove the record from the datastore, it goes into a state 'root.deleted.saved'. From this state I can't seem to then save the record because of the way the ember data state manager works. At this point I'm just having a difficult time understanding why I can't make something so conceptually simple work. Does anyone else have enough experience with ember-data to know how this should be handled?
Use the deactivate method on Ember.Route (http://emberjs.com/api/classes/Ember.Route.html#method_deactivate). There you can check to see if the model is invalid, then rollback the record.
deactivate: function(){
if(!this.model().get("isValid")){
this.model().rollback();
}
}