Version: Ember 2.11
I am trying to use Ember data model to load the data from REST API but it is failing with error message as
"ember.debug.js:17634 TypeError: Cannot read property 'type' of undefined
at Class._pushInternalModel (store.js:2005)
Here is more details:
1. REST API response is:
{
"sfresults":[
{
"url":"https://google.com/1",
"title":"Titl1",
"description":"Description1",
"type":"KB",
"lastModifiedDate":"12/23/16",
"viewScore":"86.12006476690622",
"caseNumber":"case1",
"id":"cd4ac3e8-c3ac-4be5-ad11-c62a85ddf289"
},
{
"url":"https://google.com/2",
"title":"Titl2",
"description":"Description2",
"type":"KB",
"lastModifiedDate":"12/23/16",
"viewScore":"86.12006476690622",
"caseNumber":"case2",
"id":"cd4ac3e8-c3ac-4be5-ad11-c62a85ddf289"
},
],
"message":"SUCCESS",
"id":"3bd116c7-db63-4277-8ace-a7ea846a04ee"
}
Controller code:
let sfdata = this.store.query('sfresult',{ 'searchText': inputSearchText, 'searchType' : 'SF' } );
this.set('sfresult', sfdata);
My Models
sfresult.js
import DS from 'ember-data';
export default DS.Model.extend({
sfresults: DS.hasMany('sfresults'),
message: DS.attr('string')
});
sfresults.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
description: DS.attr('string'),
caseNumber: DS.attr('string'),
lastModifiedDate: DS.attr('string'),
type: DS.attr('string'),
url: DS.attr('string'),
searchText: DS.attr('string'),
messageId: DS.attr('string')
});
export default DS.RESTAdapter.extend({
host: 'http://localhost:8080',
namespace: 'server'
});
Then i wanted to iterate sfresult and show it in the UI. but here as soon as API call response comes back it is unable to load into ember data models. fails with above error.
Note: if i try without hasMany model it works fine - meaning json response having array of elements and using only sfresults model without sfresult, but wanted to get the message in the JSON response to act accordingly - please ignore this statement if it is confusing a bit.
Any help would be greatly appreciated.
You'll need to make sure you are using the RESTSerializer. By default the serializer in a new app is JSONAPISerializer, which throws the error that you are seeing.
Related
So I need to do so that clicking on the store would stop the page with the goods of this store. When passing the store's id through the link URL changes but in the product's route model(params) the params is empty
Model name (product?)
import DS from 'ember-data';
import { empty } from '#ember/object/computed';
export default DS.Model.extend({
name: DS.attr('string'),
quantity: DS.attr('string'),
price: DS.attr('string'),
shops: DS.belongsTo('shop', {asynq: true}),
isNotValid: empty('name'),
});
Model name (shop?)
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
address: DS.attr('string'),
phone: DS.attr('string'),
products: DS.hasMany('product',{asynq: true}),
});
Controller name (?)
import Controller from '#ember/controller';
export default Controller.extend({
isNew: false,
actions: {
newProduct() {
this.toggleProperty('isNew');
},
cancelNewProducts() {
this.set('isNew', false);
},
addNewProduct() {
const name = this.get('name');
const quantity = this.get('quantity');
const price = this.get('price');
let shop = this.get('store').peekRecord('shop', );
let product = this.get('store').createRecord('product', { name,quantity,price });
shop.get('products').pushObject(product);
product.save().then( function() {
shop.save();
});
product.save().then( ()=> this.set('isNew',false));
},
},
});
Route name (?)
import Route from '#ember/routing/route';
export default Route.extend({
model(params) {
console.log(params.shop_id);
return this.store.query('product', {shops:params.shop_id});
},
actions: {
deleteProduct(product) {
let confirmation = confirm('Are you sure?');
if (confirmation) {
product.destroyRecord();
}
},
editProducts(product) {
console.log(id)
product.set('isEditing', true);
},
cancelProductsEdit(product) {
product.set('isEditing', false);
product.rollbackAttributes();
},
saveProducts(product) {
if (product.get('isNotValid')) {
return;
}
product.set('isEditing', false);
product.save();
},
},
});
Router
import EmberRouter from '#ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
this.route('shops', function() {
this.route('new');
this.route('edit', { path: '/:shop_id/edit' });
});
this.route('products', { path: '/:shop_id/products' }); // this should be in the map, right?
}); // ?
export default Router;
My problem is that I can not make a request to the server and get the goods only from the store with the available id.But when I click on any store displays all the goods. AND i can't access params(shop_id) from shops in my controller,
I just did a pretty invasive reformatting of your program. Take note of the router. Looks like there are some mistakes in there. Also, you don't provide an id to 'peek' with. In your controller. We also don't know how those files are connected or what their names are. You should edit on top of my formatting to help clarify. {async: true} is spelled with a q in your program.
As far as your question... I'll try and reword it. The word 'store' is confusing... because of the data 'store' that we are used to talking about. I think you mean that you have a 'shop' resource and that you want to 'click' on the shop... (likely a component in an each loop) and then you say you want to 'stop' the page with the goods(products) - so... maybe you mean 'stock' or 'show' the products for that shop. This could be in the component (if only a few) - or you could shoot over to a 'detail' page for the shop - that displayed all of the products for that shop. Because you mention params and ID, I think you mean to go the detail route.
This is my best guess at your question: "I have resources for 'shop' and 'product.' I'm building a UI where shops are listed. I would like to make the shops clickable and when clicked, transition to the shop detail page - where I can list all associated products. My link-to helper(not shown here) takes in a shop ID - but the transition is not successful and the params isn't recognized. What am I doing wrong?"
For this question, you could likely create a more simplified version in an ember-twiddle to get to the bottom of things. We don't really need most of those actions to get to the source of the confusion.
It's admitedly hard to show these things / when you have a server - or a mirage server or whatever your setup is. Here's an example of the routing I would suggest - with some basic dummy data - in an embertwiddle. The data isn't real ember objects / but see the link-to and the shop detail route for what you'd likely use. Good luck!
Other notes:
ember-data uses an attribute called isNew for records - so, you may want to think of a different name for what you're doing /
I'm trying to get brands items from my REST API with ember; but my API response does not match with ember-data expected. for example:
My model:
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
isActive: DS.attr('boolean')
});
My API url: http://localhost:3000/api/brands
its response with:
{"success":true,
"data":[
{"id":1,"name":"Mine","isActive":true,"createdAt":"2017-04-23T20:36:49.000Z","updatedAt":"2017-04-23T20:44:32.000Z"},
{"id":2,"name":"forever","isActive":true,"createdAt":"2017-04-23T20:41:14.000Z","updatedAt":"2017-04-23T20:43:57.000Z"}
]
}
but, Ember is expecting some like this:
"brands": [{
"id": 1,
"name": "foo",
"isActive": "foo"
}]
I'm trying to change the root json node in serializer called brand.js, but I can not make it work. :(
here my serializer/brand.js
import DS from 'ember-data';
export default DS.RESTSerializer.extend({
});
and my adapters/application.js
import DS from 'ember-data';
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
import config from '../config/environment';
export default DS.RESTAdapter.extend(DataAdapterMixin, {
host: `${config.host}`,
namespace: `${config.namespace}`,
authorizer: 'authorizer:custom'
});
on browser console this message appears:
WARNING: Encountered "success" in payload, but no model was found for model name "success" (resolved model name using vanely-web#serializer:brand:.modelNameFromPayloadKey("success"))
WARNING: Encountered "data" in payload, but no model was found for model name "datum" (resolved model name using vanely-web#serializer:brand:.modelNameFromPayloadKey("data"))
How can I say to ember where the correct data is?.Some help is appreciated.
Sorry if my English is not well.
As you already did, you can override the RESTSerializer for every model.
What you want to achieve is response normalization. You can normalize your response by overriding normalizeResponse in your serializer (see the docs):
import Ember from 'ember';
import DS from 'ember-data';
const {
RESTSerializer
} = DS;
const {
get
} = Ember;
export default RESTSerializer.extend({
normalizeResponse(store, primaryModelClass, payload, id, requestType) {
// Only do normalization for reading:
if(requestType !== 'createRecord' && requestType !== 'updateRecord' && requestType !== 'deleteRecord') {
// Do your normalization here. For example (not tested):
payload = {
brands: get(payload, 'data')
};
}
return this._super(store, primaryModelClass, payload, id, requestType);
}
});
Instead of overriding normalizeResponse, you could also override the other normalization methods.
I am a beginner in Ember and trying to implement a simple post and comment app.
I have a rails background and hence i'm using Rails API for this.
I have followed a tutorial and i'm able to save a post, fetch all its comments and delete the post. However i'm having issues in saving comment related to the post.
Following is the code for models
post.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string'),
comments: DS.hasMany('comment')
});
comment.js
import DS from 'ember-data';
export default DS.Model.extend({
author: DS.attr('string'),
body: DS.attr('string'),
post: DS.belongsTo('post')
});
routes/post/comment/new.js
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return {};
},
renderTemplate() {
this.render('post.comment.new', { into: 'application' });
},
actions: {
save() {
const post = this.modelFor('post');
const newComment = this.get('store').createRecord('comment', this.currentModel);
newComment.set('post', post);
newComment.save().then(() => {
this.transitionTo('post', post);
});
},
cancel() {
this.transitionTo('post', this.modelFor('post'));
}
}
});
router.js
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
this.route('posts');
this.route('post.new', { path: 'posts/new' });
this.resource('post', { path: 'posts/:post_id' }, function() {
this.route('comment.new', { path: 'comments/new' });
});
});
export default Router;
Saving the comment is where i'm facing an issue. This is really strange but while saving the comment, the params passed to the server looks like
Parameters: {"comment"=>{"author"=>"dsa", "body"=>"asd", "post"=>"9"}}
Unpermitted parameter: post
From what i understand, the parameter should be post_id and not post. If post is being passed, then it should be object. I may be wrong of course because i don't have a clear understanding in Ember yet.
On randomly fiddling with the code, i found that if i replace the relationship in comments model from
post: DS.belongsTo('post')
to
post_id: DS.belongsTo('post')
the params passed to server are
Parameters: {"comment"=>{"author"=>"fg", "body"=>"dfs", "post_id"=>nil}}
This however doesn't actually pass the post_id as its nil.
This might be absolutely wrong and not how its supposed to work but i'm clueless.
Thanks for any help.
Create comment serializer and override keyForRelationship method like below :
keyForRelationship(key/*, relationship, method*/) {
if(key === 'post') return 'post_id';
return this._super(...arguments);
}
and the post relation should be :
post: DS.belongsTo('post')
I'm trying to add a custom property to an Ember Data Model. Specifically I want to add a property which defines the REST end point to use in an Ember Data Adapter I'm writing.
My Model is defined as such (with custom property 'endPoint'):
import DS from 'ember-data';
export default DS.Model.extend({
partner_id : DS.attr('string'),
partner_key : DS.attr('string'),
partner_name : DS.attr('string'),
created : DS.attr('string'),
status : DS.attr('string'),
type : DS.attr('string'),
endPoint : 'api_entry'
});
In my Adapter I'm trying to access the property as follows:
_buildURL: function (modelName, store, id, snapshot, requestType, query) {
var host, namespace, url;
var model = store.modelFor(modelName);
var endPoint = model.endPoint;
var endPoint2 = Ember.get(model, 'endPoint');
console.log(endPoint, endPoint2);
host = Ember.get(this, "host");
namespace = Ember.get(this, "namespace");
url = [];
if (host) {
url.push(host);
}
if (namespace) {
url.push(namespace);
}
url.push(modelName);
url = url.join("/");
if (!host) {
url = "/" + url;
}
return url;
},
In the console.log above, both endPoint and endPoint2 are undefined. I'm new to Ember and Javascript. What am I doing wrong? Is there a more 'Ember' way to do this? I don't want to use the actual REST endpoint names as my model names as they do not adhere to Ember model naming conventions.
Help much appreciated.
Your buildURL function dealing with the model class as opposed to the model instance. You need to add the property to the class:
var model = DS.Model.extend({
partner_id : DS.attr('string'),
partner_key : DS.attr('string'),
partner_name : DS.attr('string'),
created : DS.attr('string'),
status : DS.attr('string'),
type : DS.attr('string')
});
model.reopenClass({
endPoint : 'api_entry'
});
export default model;
Im using Ember Data and Ember CLI. I have a simple one-to-many relationship between two models. I'm trying to create a computed property that returns the number of items that are attached to the current model.
models/account.js
// Account model
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
notes: DS.hasMany('note', { async: true })
});
models/note.js
// Note model
import DS from 'ember-data';
export default DS.Model.extend({
body: DS.attr('string'),
date: DS.attr('number'), // unix timestamp
account: DS.belongsTo('account', { async: true })
});
controllers/account/index.js
// account/index controller
import Ember from 'ember';
export default Ember.ObjectController.extend({
oldNotesCount: function() {
var notes = this.get('notes');
console.log('=-=', notes.length); // undefined *****
return notes.length;
}.property('notes.#each')
});
How come notes.length is undefined?
I've simplified this example... I can't use {{notes.length}} in my situation as there will be more calculations going on—this is just the first step.
You marked notes association as async so this.get('notes') returns a promise. Promises do not have length property hence getting undefined.
To get data in an async association call then on returned promise with a function as argument. Association data will be passed to that function as first argument.
export default Ember.ObjectController.extend({
oldNotesCount: function() {
var _this = this;
this.get('notes').then(function(notes){
_this.set('oldNotesCount', notes.get('length');
});
return null;
}.property('notes.#each')
});