Angular 2 Form Serialization Into JSON Format
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am having a little bit of trouble creating my Angular 2 form and converting the submitted data into JSON format for the use of submitting it to my API. I am looking for something that works very similarly to this example:
$.fn.serializeObject = function()http://jsfiddle.net/sxGtM/3/
The only problem with this example is that the code is written in JQuery, whereas I'm trying to use strictly angular 2.
Any help would be greatly appreciated, I am still very new to angular.
json forms
angular asked Sep 26 '16 at 8:42
Tristan CTristan C
1031211
add a comment |
I am having a little bit of trouble creating my Angular 2 form and converting the submitted data into JSON format for the use of submitting it to my API. I am looking for something that works very similarly to this example:
$.fn.serializeObject = function()http://jsfiddle.net/sxGtM/3/
The only problem with this example is that the code is written in JQuery, whereas I'm trying to use strictly angular 2.
Any help would be greatly appreciated, I am still very new to angular.
json forms
angular asked Sep 26 '16 at 8:42
Tristan CTristan C
1031211
if you are using angular then why there is no ngmodel in your input?
– Gaurav Srivastava
Sep 26 '16 at 8:59
Because this was an example I found, not my code. I want to implement something similar to this example using angular 2
– Tristan C
Sep 26 '16 at 9:15
add a comment |
I am having a little bit of trouble creating my Angular 2 form and converting the submitted data into JSON format for the use of submitting it to my API. I am looking for something that works very similarly to this example:
$.fn.serializeObject = function()http://jsfiddle.net/sxGtM/3/
The only problem with this example is that the code is written in JQuery, whereas I'm trying to use strictly angular 2.
Any help would be greatly appreciated, I am still very new to angular.
json forms
angular asked Sep 26 '16 at 8:42
Tristan CTristan C
1031211
I am having a little bit of trouble creating my Angular 2 form and converting the submitted data into JSON format for the use of submitting it to my API. I am looking for something that works very similarly to this example:
$.fn.serializeObject = function()http://jsfiddle.net/sxGtM/3/
The only problem with this example is that the code is written in JQuery, whereas I'm trying to use strictly angular 2.
Any help would be greatly appreciated, I am still very new to angular.
json forms
angular json forms
angular asked Sep 26 '16 at 8:42
Tristan CTristan C
1031211
asked Sep 26 '16 at 8:42
Tristan CTristan C
1031211
asked Sep 26 '16 at 8:42
Tristan CTristan C
1031211
asked Sep 26 '16 at 8:42
Tristan CTristan C
1031211
asked Sep 26 '16 at 8:42
Tristan CTristan C
1031211
1031211
if you are using angular then why there is no ngmodel in your input?
– Gaurav Srivastava
Sep 26 '16 at 8:59
Because this was an example I found, not my code. I want to implement something similar to this example using angular 2
– Tristan C
Sep 26 '16 at 9:15
add a comment |
if you are using angular then why there is no ngmodel in your input?
– Gaurav Srivastava
Sep 26 '16 at 8:59
Because this was an example I found, not my code. I want to implement something similar to this example using angular 2
– Tristan C
Sep 26 '16 at 9:15
if you are using angular then why there is no ngmodel in your input?
– Gaurav Srivastava
Sep 26 '16 at 8:59
if you are using angular then why there is no ngmodel in your input?
– Gaurav Srivastava
Sep 26 '16 at 8:59
Because this was an example I found, not my code. I want to implement something similar to this example using angular 2
– Tristan C
Sep 26 '16 at 9:15
Because this was an example I found, not my code. I want to implement something similar to this example using angular 2
– Tristan C
Sep 26 '16 at 9:15
add a comment |
3 Answers
3
active
oldest
votes
You can use the getRawValue() function if you're using a FormGroup, to return an object that can then be serialized using JSON.stringify().
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Http } from '@angular/http';
@Component({
selector: 'my-component',
templateUrl: 'my-component.component.html'
})
export class MyComponent implements OnInit {
form: FormGroup;
constructor(private fbuilder: FormBuilder,
private http: Http) { }
ngOnInit(){
this.form = this.fbuilder.group({
name: '',
description: ''
});
}
sendToAPI(){
let formObj = this.form.getRawValue(); // {name: '', description: ''}
let serializedForm = JSON.stringify(formObj);
this.http.post("www.domain.com/api", serializedForm)
.subscribe(
data => console.log("success!", data),
error => console.error("couldn't post because", error)
);
}
}
edited Nov 27 '18 at 1:28
Mr-Programs
380115
answered Sep 26 '16 at 9:36
Federico PettinellaFederico Pettinella
1,0771817
add a comment |
You can use JSON.stringify(form.value):
submit() {
let resource = JSON.stringify(this.form.value);
console.log('Add Button clicked: ' + resource);
this.service.create(resource)
.subscribe(response => console.log(response));
}
Result in Chrome DevTools:
edited Jun 11 '18 at 6:58
Edric
7,93363349
answered Jan 23 '18 at 13:37
Mahesh NepalMahesh Nepal
28938
add a comment |
You are looking for JSON.stringify(object) which will give you the JSON represantation of your javascript object.
You can then POST this using the built-in HTTP service to your server.
answered Sep 26 '16 at 8:57
Alexander CiesielskiAlexander Ciesielski
6,31433158
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39698247%2fangular-2-form-serialization-into-json-format%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use the getRawValue() function if you're using a FormGroup, to return an object that can then be serialized using JSON.stringify().
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Http } from '@angular/http';
@Component({
selector: 'my-component',
templateUrl: 'my-component.component.html'
})
export class MyComponent implements OnInit {
form: FormGroup;
constructor(private fbuilder: FormBuilder,
private http: Http) { }
ngOnInit(){
this.form = this.fbuilder.group({
name: '',
description: ''
});
}
sendToAPI(){
let formObj = this.form.getRawValue(); // {name: '', description: ''}
let serializedForm = JSON.stringify(formObj);
this.http.post("www.domain.com/api", serializedForm)
.subscribe(
data => console.log("success!", data),
error => console.error("couldn't post because", error)
);
}
}
edited Nov 27 '18 at 1:28
Mr-Programs
380115
answered Sep 26 '16 at 9:36
Federico PettinellaFederico Pettinella
1,0771817
add a comment |
You can use the getRawValue() function if you're using a FormGroup, to return an object that can then be serialized using JSON.stringify().
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Http } from '@angular/http';
@Component({
selector: 'my-component',
templateUrl: 'my-component.component.html'
})
export class MyComponent implements OnInit {
form: FormGroup;
constructor(private fbuilder: FormBuilder,
private http: Http) { }
ngOnInit(){
this.form = this.fbuilder.group({
name: '',
description: ''
});
}
sendToAPI(){
let formObj = this.form.getRawValue(); // {name: '', description: ''}
let serializedForm = JSON.stringify(formObj);
this.http.post("www.domain.com/api", serializedForm)
.subscribe(
data => console.log("success!", data),
error => console.error("couldn't post because", error)
);
}
}
edited Nov 27 '18 at 1:28
Mr-Programs
380115
answered Sep 26 '16 at 9:36
Federico PettinellaFederico Pettinella
1,0771817
add a comment |
You can use the getRawValue() function if you're using a FormGroup, to return an object that can then be serialized using JSON.stringify().
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Http } from '@angular/http';
@Component({
selector: 'my-component',
templateUrl: 'my-component.component.html'
})
export class MyComponent implements OnInit {
form: FormGroup;
constructor(private fbuilder: FormBuilder,
private http: Http) { }
ngOnInit(){
this.form = this.fbuilder.group({
name: '',
description: ''
});
}
sendToAPI(){
let formObj = this.form.getRawValue(); // {name: '', description: ''}
let serializedForm = JSON.stringify(formObj);
this.http.post("www.domain.com/api", serializedForm)
.subscribe(
data => console.log("success!", data),
error => console.error("couldn't post because", error)
);
}
}
edited Nov 27 '18 at 1:28
Mr-Programs
380115
answered Sep 26 '16 at 9:36
Federico PettinellaFederico Pettinella
1,0771817
You can use the getRawValue() function if you're using a FormGroup, to return an object that can then be serialized using JSON.stringify().
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Http } from '@angular/http';
@Component({
selector: 'my-component',
templateUrl: 'my-component.component.html'
})
export class MyComponent implements OnInit {
form: FormGroup;
constructor(private fbuilder: FormBuilder,
private http: Http) { }
ngOnInit(){
this.form = this.fbuilder.group({
name: '',
description: ''
});
}
sendToAPI(){
let formObj = this.form.getRawValue(); // {name: '', description: ''}
let serializedForm = JSON.stringify(formObj);
this.http.post("www.domain.com/api", serializedForm)
.subscribe(
data => console.log("success!", data),
error => console.error("couldn't post because", error)
);
}
}
edited Nov 27 '18 at 1:28
Mr-Programs
380115
answered Sep 26 '16 at 9:36
Federico PettinellaFederico Pettinella
1,0771817
edited Nov 27 '18 at 1:28
Mr-Programs
380115
edited Nov 27 '18 at 1:28
Mr-Programs
380115
edited Nov 27 '18 at 1:28
Mr-Programs
380115
380115
answered Sep 26 '16 at 9:36
Federico PettinellaFederico Pettinella
1,0771817
answered Sep 26 '16 at 9:36
Federico PettinellaFederico Pettinella
1,0771817
answered Sep 26 '16 at 9:36
Federico PettinellaFederico Pettinella
1,0771817
1,0771817
add a comment |
add a comment |
You can use JSON.stringify(form.value):
submit() {
let resource = JSON.stringify(this.form.value);
console.log('Add Button clicked: ' + resource);
this.service.create(resource)
.subscribe(response => console.log(response));
}
Result in Chrome DevTools:
edited Jun 11 '18 at 6:58
Edric
7,93363349
answered Jan 23 '18 at 13:37
Mahesh NepalMahesh Nepal
28938
add a comment |
You can use JSON.stringify(form.value):
submit() {
let resource = JSON.stringify(this.form.value);
console.log('Add Button clicked: ' + resource);
this.service.create(resource)
.subscribe(response => console.log(response));
}
Result in Chrome DevTools:
edited Jun 11 '18 at 6:58
Edric
7,93363349
answered Jan 23 '18 at 13:37
Mahesh NepalMahesh Nepal
28938
add a comment |
You can use JSON.stringify(form.value):
submit() {
let resource = JSON.stringify(this.form.value);
console.log('Add Button clicked: ' + resource);
this.service.create(resource)
.subscribe(response => console.log(response));
}
Result in Chrome DevTools:
edited Jun 11 '18 at 6:58
Edric
7,93363349
answered Jan 23 '18 at 13:37
Mahesh NepalMahesh Nepal
28938
You can use JSON.stringify(form.value):
submit() {
let resource = JSON.stringify(this.form.value);
console.log('Add Button clicked: ' + resource);
this.service.create(resource)
.subscribe(response => console.log(response));
}
Result in Chrome DevTools:
edited Jun 11 '18 at 6:58
Edric
7,93363349
answered Jan 23 '18 at 13:37
Mahesh NepalMahesh Nepal
28938
edited Jun 11 '18 at 6:58
Edric
7,93363349
edited Jun 11 '18 at 6:58
Edric
7,93363349
edited Jun 11 '18 at 6:58
Edric
7,93363349
7,93363349
answered Jan 23 '18 at 13:37
Mahesh NepalMahesh Nepal
28938
answered Jan 23 '18 at 13:37
Mahesh NepalMahesh Nepal
28938
answered Jan 23 '18 at 13:37
Mahesh NepalMahesh Nepal
28938
28938
add a comment |
add a comment |
You are looking for JSON.stringify(object) which will give you the JSON represantation of your javascript object.
You can then POST this using the built-in HTTP service to your server.
answered Sep 26 '16 at 8:57
Alexander CiesielskiAlexander Ciesielski
6,31433158
add a comment |
You are looking for JSON.stringify(object) which will give you the JSON represantation of your javascript object.
You can then POST this using the built-in HTTP service to your server.
answered Sep 26 '16 at 8:57
Alexander CiesielskiAlexander Ciesielski
6,31433158
add a comment |
You are looking for JSON.stringify(object) which will give you the JSON represantation of your javascript object.
You can then POST this using the built-in HTTP service to your server.
answered Sep 26 '16 at 8:57
Alexander CiesielskiAlexander Ciesielski
6,31433158
You are looking for JSON.stringify(object) which will give you the JSON represantation of your javascript object.
You can then POST this using the built-in HTTP service to your server.
answered Sep 26 '16 at 8:57
Alexander CiesielskiAlexander Ciesielski
6,31433158
answered Sep 26 '16 at 8:57
Alexander CiesielskiAlexander Ciesielski
6,31433158
answered Sep 26 '16 at 8:57
Alexander CiesielskiAlexander Ciesielski
6,31433158
answered Sep 26 '16 at 8:57
Alexander CiesielskiAlexander Ciesielski
6,31433158
6,31433158
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39698247%2fangular-2-form-serialization-into-json-format%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
if you are using angular then why there is no ngmodel in your input?
– Gaurav Srivastava
Sep 26 '16 at 8:59
Because this was an example I found, not my code. I want to implement something similar to this example using angular 2
– Tristan C
Sep 26 '16 at 9:15