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.
The angular.toJson() Function in AngularJS is used to serialize the javascript object into a JSON – formatted string. It takes the javascript object and returns JSON string. Syntax: angular.toJson(object) Example:
If you are solely interested in outputting the JSON somewhere in your HTML, you could also use a pipe inside an interpolation. For example: I am not entirely sure it works for every AngularJS version, but it works perfectly in my Ionic App (which uses Angular 2+). Show activity on this post. Because you're encapsulating the product again.
The angular.toJson() Functionin AngularJS is used to serialize the javascript object into a JSON – formatted string. It takes the javascript object and returns JSON string. Syntax: angular.toJson(object)
AngularJS | angular.isString() Function AngularJS | angular.isUndefined() Function AngularJS | angular.equals() Function AngularJS JSON Function
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)
);
}
}
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With