Positing JSON to Rails API from Ember JS - ruby-on-rails

Question

I'm trying to post data from my Ember app to my Rails API for a blog application I'm playing with.
I'm having a few issues, which I think each stem from my initial problem.
First of all, when I try to store the data from my inputs in Ember, I can't seem to store them in any variables. I've tried checking to see if I'm trying to access the values the wrong way but the documents I've been reading (Ember docs, and other stack overflow questions) lead me to believe I'm doing this correctly.
//new.js
import Ember from 'ember';
import DS from 'ember-data';
export default Ember.Route.extend({
actions:{
createPost(){
var created_at = new Date();
var user = this.store.findRecord('user', 1);
var title = this.get('title');
var body = this.get('body');
console.log(title, body);
// console.log(user);
var post = this.store.createRecord('post', {
title: title,
body: body,
created_at: created_at,
user: user
})
post.save();
}
}
});
and
//new.hbs
{{outlet}}
<form>
<strong>Title</strong><br/>
{{input name="title" value=title}}<br/>
<strong>Body</strong><br/>
{{input name="body" value=body}}<br/>
<button type="submit" {{action 'createPost'}}>Submit</button>
</form>
My output of title and body returns undefined.
Another issue I'm having is when I try post this data to my Rails API, I get a 422 error. It says that there is an unpermitted parameter (created_at) included, so I was wondering if there was a way to exclude parameters from my post request?
Thanks in advance.

Answer 1

I would move this action in controller, than define title and body as property.
import Ember from 'ember';
export default Ember.Controller.extend({
title: null,
body: null,
actions: {
createPost(){
var created_at = new Date();
var user = this.store.findRecord('user', 1);
var title = this.get('title');
var body = this.get('body');
console.log(title, body);
// console.log(user);
var post = this.store.createRecord('post', {
title: title,
body: body,
created_at: created_at,
user: user
})
post.save();
}
}
})
Error is showing because you didn't define title and body.
As for other part of problem with param created_at just remove it from model or from this.store.createRecord() block

Answer 2

The following snippet instantiates a new post record in the model hook which is available to the template.
//new.js
import Ember from 'ember';
import DS from 'ember-data';
export default Ember.Route.extend({
model() {
return this.store.createRecord('post');
},
actions:{
createPost(){
var user = this.store.findRecord('user', 1);
var created_at = new Date();
var post = this.currentModel;
post.setProperties({created_at: created_at, user: user});
post.save();
}
}
});
and your template becomes
//new.hbs
{{outlet}}
<form>
<strong>Title</strong><br/>
{{input name="title" value=model.title}}<br/>
<strong>Body</strong><br/>
{{input name="body" value=model.body}}<br/>
<button type="submit" {{action 'createPost'}}>Submit</button>
</form>
The var user = this.store.findRecord('user', 1); line in it's current form will cause issues since findRecord returns a promise.
To exclude the created_atfrom being sent to the API endpoint, create a post serializer
//serializers/post.js
import DS from 'ember-data';
// NOTE: Update the serializer to reflect your project's serializer choice
export default DS.JSONAPISerializer.extend({
attrs: {
created_at: { serialize: false }
}
});